L'événement de sélection n'est pas déclenché avec RactiveJS

Question

Est-ce que je fais quelque chose de mal?

Mon modèle

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

Mon code 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

Il n'existe rien de tel que le select événement.En JavaScript standard, sans Ractive, vous feriez cela pour écouter les modifications apportées au <select> valeur de l'élément :

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

Donc l'équivalent dans Ractive serait

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

Mais il existe en fait un moyen légèrement plus simple d'écouter ces changements avec Ractive : observer les données elles-mêmes.Tout d’abord, nous pouvons nous débarrasser de la directive du gestionnaire d’événements :

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

Ensuite, dans votre code, faites ceci :

caseForm.observe( 'formData.muni_ssn', function ( newValue, oldValue ) {
  console.log( 'changed from', oldValue, 'to', newValue );
});

L'avantage de procéder de cette façon est que vous n'avez pas besoin de faire la distinction entre les changements qui se produisent à la suite d'une interaction avec le DOM et les changements qui se produisent par programme (par ex.dans le cadre de votre configuration initiale), ce qui facilite grandement le suivi de l'état de l'application.