题
是我做错了什么?
我的模板
<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);
});
. 解决方案
没有世纪odicetagcode事件这样的东西。在标准的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交互的结果发生的变化,并且以编程方式发生的更改(例如作为初始设置的一部分) - 使其更容易跟踪应用程序状态。
不隶属于 StackOverflow