Aurelia Js select box not working

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 (как стало видно из комментариев исходных вопросов) элемент выбора не запускает событие 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; 
    } 
    }); 
} 

Примечание: suspendUpdate «трюк» необходим, поскольку change CustomEvent также вызывает JQuery огонь свой собственный change событие, которое вызывает бесконечный цикл.

Шаблон вида для сниппета выше:

<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, который демонстрирует этот подход: https://gist.run/?id=4e7dd11228407e765844570409d210bd

Конечно, если вы используете материализовать с Aurelia, вы можете также используйте Мост материализации: http://aurelia-ui-toolkits.github.io/demo-materialize/#/about

Отказ от ответственности: Я являюсь одним из создателей моста Aurelia Materialize.