Evento en el selecto que no se está activando con ractionjs
-
21-12-2019 - |
Pregunta
¿Estoy haciendo algo mal?
mi plantilla
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-select="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
mi código 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);
});
Solución
No hay tal cosa como el evento select
.En JavaScript estándar, sin Ractive, haría esto para escuchar los cambios en el valor del elemento de <select>
:
// 'change' event, not 'select' event
document.getElementById( 'muni' ).addEventListener( 'change', function () {
console.log( 'select value changed to', this.value );
});
Entonces, el equivalente en Ractive sería
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-change="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
Pero en realidad hay una forma ligeramente más fácil de escuchar los cambios con Ractive: observar los datos en sí.Primero, podemos deshacernos de la Directiva del manejador de eventos:
<select id="muni" class="form-control" value="{{formData.muni_ssn}}">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
Luego, en su código, haga esto:
caseForm.observe( 'formData.muni_ssn', function ( newValue, oldValue ) {
console.log( 'changed from', oldValue, 'to', newValue );
});
La ventaja de hacerlo de esta manera es que no necesita distinguir entre los cambios que ocurren como resultado de la interacción DOM, y los cambios que suceden de manera programática (por ejemplo, como parte de su configuración inicial), lo que hace que sea mucho más fácilMantenga un registro del estado de la aplicación.