Sobre-escolha o evento não está sendo acionado com RactiveJS

Question

Estou fazendo algo errado?

O meu modelo de

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

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

Answer 1

Não há nenhuma tal coisa como a select do evento.Em JavaScript padrão, sem Ractive, você faria isso para ouvir alterações no <select> valor do elemento:

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

Então o equivalente em Ractive seria

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

Mas há realmente um pouco mais fácil maneira de escutar essas alterações com Ractive - observar os dados em si.Primeiro, podemos livrar-se do manipulador de eventos directiva:

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

Então, no seu código, faça o seguinte:

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

A vantagem de fazê-lo desta maneira é que você não precisa distinguir entre as alterações que ocorrem como resultado do DOM de interação, e as alterações que ocorrem por meio de programação (e.g.como parte da configuração inicial), tornando - o muito mais fácil acompanhar o estado da aplicação.