in-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에서는 LACTIVE가 없으면 <select>
요소의 값의 변경 사항을 청취 할 수 있습니다.
// 'change' event, not 'select' event
document.getElementById( 'muni' ).addEventListener( 'change', function () {
console.log( 'select value changed to', this.value );
});
.
라이브램과 동등한 것은
<select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-change="muni_selected">
{{#formData.municipalities}}
<option value="{{ssn}}">{{name}}</option>
{{/formData.municipalities}}
</select>
.
그러나 실제로 RACTICT의 변경 사항을 듣는 데 약간 쉬운 방법이 있습니다. 데이터 자체를 관찰하십시오.첫째, 우리는 이벤트 처리기 지시문을 제거 할 수 있습니다.
<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