Evento seleccionado: no se activa con RactiveJS

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

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 <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 manera un poco más fácil de escuchar esos cambios con Ractive: observe los datos en sí. Primero, podemos deshacernos de la directiva del controller de events:

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

Luego, en tu código, haz 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 ocurren de forma programática (por ejemplo, como parte de su configuration inicial), lo que facilita mucho el seguimiento de estado de aplicación.