Sobre-escolha o evento não está sendo acionado com RactiveJS
-
21-12-2019 - |
Pergunta
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);
});
Solução
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.