Aurelia Js 선택 상자가 작동하지 않습니다.

Question

Aurelia Js에 새로운 기능이 있습니다. 여기서는 간단한 선택 상자를 사용하고 있지만 값을 변경하는 동안 작동하지 않습니다.

HTML :

<select value.bind="selectVal" change.delegate="changed()"> 
         <option value="" disabled selected>Doc.Type</option> 
         <option value="1">Option 1</option> 
         <option value="2">Option 2</option> 
         <option value="3">Option 3</option> 
        </select> 

모델 : 값을 변경하면서 트리거링되지 this.selectVal = ''; changed(){ alert(); } change.delegate. 또한 datepicker 값이 모델에로드되지 않습니다. 문제는 무엇입니까? 그것은 내 끝에서 또는 Aurelia js 문제를 형성합니다.

Answer 1

Materialize를 사용할 때 (원래 질문의 주석에서 분명 해짐) select 요소는 change 이벤트를 발생시키지 않습니다. jQuery change 이벤트를 청취하고 이벤트 처리기에서 CustomEvent을 실행해야합니다. 이처럼

:

_suspendUpdate = false; 
attached() { 
    $(this.option).material_select() 
    $(this.option).on('change', e => { 
    if (!this._suspendUpdate) { 
     let customEvent = new CustomEvent('change', {}); 
     this._suspendUpdate = true; 
     this.option.dispatchEvent(customEvent); 
     this._suspendUpdate = false; 
    } 
    }); 
} 

참고 : change 맞춤 이벤트는 jQuery를 무한 루프가 발생 자체 change 이벤트를 발생시키는 원인이 때문에 suspendUpdate "속임수"가 필요합니다.

위의 코드 조각에 대한 뷰 템플릿 : 물론 https://gist.run/?id=4e7dd11228407e765844570409d210bd

당신이, 당신이 할 수있는 아우렐 리아와 구체화를 사용하는 경우 : 여기

<template> 
    <require from="materialize/dist/css/materialize.css"></require> 
    <div class="input-field col s12"> 
    <select ref="option" value.bind="optionSelect"> 
    <option value="" disabled selected>Choose your option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
    <p>Selected value: ${optionSelect}</p> 
    </div> 
</template> 

또한이 방법을 보여줍니다 gist.run입니다 또한 Materialize 브릿지를 사용하십시오. http://aurelia-ui-toolkits.github.io/demo-materialize/#/about

면책 조항 : 저는 Aurelia Materialise bridge의 제작자 중 한 명입니다.