Bei-Auswahl-Ereignis wird mit RactiveJS nicht ausgelöst
-
21-12-2019 - |
Frage
Mache ich etwas falsch?
Meine Vorlage
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-select="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
Mein js-Code
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);
});
Lösung
So etwas gibt es nicht select
Ereignis.In Standard-JavaScript ohne Ractive würden Sie dies tun, um Änderungen im zu überwachen <select>
Wert des Elements:
// 'change' event, not 'select' event
document.getElementById( 'muni' ).addEventListener( 'change', function () {
console.log( 'select value changed to', this.value );
});
Das Äquivalent in Ractive wäre also
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-change="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
Aber mit Ractive gibt es tatsächlich eine etwas einfachere Möglichkeit, auf diese Änderungen zu achten: Beobachten Sie die Daten selbst.Zuerst können wir die Event-Handler-Direktive loswerden:
<select id="muni" class="form-control" value="{{formData.muni_ssn}}">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
Führen Sie dann in Ihrem Code Folgendes aus:
caseForm.observe( 'formData.muni_ssn', function ( newValue, oldValue ) {
console.log( 'changed from', oldValue, 'to', newValue );
});
Der Vorteil dieser Vorgehensweise besteht darin, dass Sie nicht zwischen Änderungen, die als Ergebnis der DOM-Interaktion erfolgen, und Änderungen, die programmgesteuert erfolgen (z. B.als Teil Ihrer Ersteinrichtung) – was es viel einfacher macht, den Überblick über den Anwendungsstatus zu behalten.