Событие On-select не запускается с помощью RactiveJS
-
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>
Мой 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);
});
Решение
Не существует такого понятия, как 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, и изменениями, которые происходят программно (напримеркак часть вашей первоначальной настройки) - значительно упрощает отслеживание состояния приложения.