javascript - RactiveJS 未触发选择事件

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>

我的js代码

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 这样的东西事件。在标准的 JavaScript 中，如果没有 Ractive，你会这样做来监听 <select> 中的变化。元素的值:

// 'change' event, not 'select' event
document.getElementById( 'muni' ).addEventListener( 'change', function () {
  console.log( 'select value changed to', this.value );
});

所以 Ractive 中的等价物是

<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-change="muni_selected">
  {{#formData.municipalities}}
    <option value="{{ssn}}">{{name}}</option>
  {{/formData.municipalities}}
</select>

但实际上有一种更简单的方法可以使用 Ractive 来监听这些变化——观察数据本身。首先，我们可以摆脱事件处理程序指令:

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

这样做的好处是您不需要区分由于 DOM 交互而发生的变化，以及以编程方式发生的变化(例如，作为初始设置的一部分)——这使得它更容易跟踪应用程序状态。