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がトリガされていません。また、日付ピッカー値がモデルに読み込まれていません。何が問題になるでしょうか？それは私の最後かフォームから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 CustomEventも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 Materializeブリッジの作成者の1人です。