On-SelectイベントがRactiveJSでトリガされていません
-
21-12-2019 - |
質問
私は何か悪いことをしていますか?
私のテンプレート
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-select="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
.
私の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);
});
. 解決
select
イベントのようなものはありません。標準のJavaScriptでは、Ractiveがなければ、<select>
要素の値の変更を待ち受けるためにこれを行うことができます:
// 'change' event, not 'select' event
document.getElementById( 'muni' ).addEventListener( 'change', function () {
console.log( 'select value changed to', this.value );
});
.
だから、Ractiveの同等のものは
です<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-change="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
.
しかし、Ractiveでのそれらの変更を聴くのはわずかに簡単な方法があります - データ自体を監視します。まず、イベントハンドラ指令を取り除くことができます:
<select id="muni" class="form-control" value="{{formData.muni_ssn}}">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
.
その後、あなたのコードではこれを行います:
caseForm.observe( 'formData.muni_ssn', function ( newValue, oldValue ) {
console.log( 'changed from', oldValue, 'to', newValue );
});
.
これを行うという利点は、DOMの対話の結果として発生する変更を区別する必要がなく、プログラム的に発生する変更(初期設定の一環として) - それをはるかに簡単にすることです。アプリケーションの状態を追跡します。
所属していません StackOverflow