Поле выбора 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 не загружается в модель. В чем будет проблема? Это от моего конца или от вопроса Аурелии?

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;
    }
  });
}

Обратите внимание 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/

Отказ от ответственности: я один из создателей Aurelia Materialise bridge.