على تحديد الحدث لا يتم تشغيلها مع راكتيفيجس

Question

هل أفعل شيئا خاطئا?

القالب الخاص بي

   <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);
});

Answer 1

ليس هناك شيء مثل 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 );
});

ميزة القيام بذلك بهذه الطريقة هي أنك لا تحتاج إلى التمييز بين التغييرات التي تحدث نتيجة للتفاعل دوم ، والتغييرات التي تحدث برمجيا (على سبيل المثال.كجزء من الإعداد الأولي الخاص بك) - مما يجعل من الاسهل بكثير لتتبع حالة التطبيق.