على تحديد الحدث لا يتم تشغيلها مع راكتيفيجس
-
21-12-2019 - |
سؤال
هل أفعل شيئا خاطئا?
القالب الخاص بي
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-select="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
رمز شبيبة بلدي
var caseForm = new Ractive({
el: "case-form",
template: "#CaseFormTemplate",
data: {
formData: mappeal.caseFormData
}
});
caseForm.on("muni_selected", function (event) {
alert(event.context.formData.muni_ssn);
});
المحلول
ليس هناك شيء مثل select
حدث.في جافا سكريبت القياسية ، دون عنصرية ، وكنت تفعل ذلك للاستماع إلى التغييرات في <select>
قيمة العنصر:
// 'change' event, not 'select' event
document.getElementById( 'muni' ).addEventListener( 'change', function () {
console.log( 'select value changed to', this.value );
});
لذا فإن المكافئ في السباق سيكون
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-change="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
ولكن هناك في الواقع طريقة أسهل قليلا للاستماع لتلك التغييرات مع عنصري-مراقبة البيانات نفسها.أولا ، يمكننا التخلص من توجيه معالج الأحداث:
<select id="muni" class="form-control" value="{{formData.muni_ssn}}">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
ثم ، في التعليمات البرمجية الخاصة بك ، القيام بذلك:
caseForm.observe( 'formData.muni_ssn', function ( newValue, oldValue ) {
console.log( 'changed from', oldValue, 'to', newValue );
});
ميزة القيام بذلك بهذه الطريقة هي أنك لا تحتاج إلى التمييز بين التغييرات التي تحدث نتيجة للتفاعل دوم ، والتغييرات التي تحدث برمجيا (على سبيل المثال.كجزء من الإعداد الأولي الخاص بك) - مما يجعل من الاسهل بكثير لتتبع حالة التطبيق.
لا تنتمي إلى StackOverflow