Evento on-select non viene attivato con ractivejs
-
21-12-2019 - |
Domanda
Sto facendo qualcosa di sbagliato?
Il mio modello
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-select="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
.
Il mio codice 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);
});
. Soluzione
Non c'è niente come l'evento select
.In JavaScript standard, senza raction, lo faresti per ascoltare le modifiche nel valore dell'elemento di <select>
:
// 'change' event, not 'select' event
document.getElementById( 'muni' ).addEventListener( 'change', function () {
console.log( 'select value changed to', this.value );
});
.
Quindi l'equivalente in raction sarebbe
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-change="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
.
Ma in realtà c'è un modo leggermente più semplice per ascoltare tali modifiche con raction - osserva i dati stessi.Innanzitutto, possiamo sbarazzarci della direttiva del gestore degli eventi:
<select id="muni" class="form-control" value="{{formData.muni_ssn}}">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
.
Allora, nel tuo codice, fai questo:
caseForm.observe( 'formData.muni_ssn', function ( newValue, oldValue ) {
console.log( 'changed from', oldValue, 'to', newValue );
});
.
Il vantaggio di farlo in questo modo è che non è necessario distinguere tra i cambiamenti che si verificano come risultato di DOM Interazione e cambiamenti che si verificano a livello di programmazione (ad esempio come parte della tua configurazione iniziale) - rendendolo molto più facileTieni traccia dello stato di applicazione.