Поле выбора Aurelia Js не работает

#jquery-plugins #aurelia

#jquery-плагины #aurelia

Вопрос:

Я новичок в 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(); }
: не запускается при изменении значения. Кроме того, значение datepicker не загружается в модель. В чем проблема? Это какая-либо проблема с моей стороны или формы Aurelia js.

1. Вы можете использовать селекторы jquery только в attached(){...} случае вашего компонента (после рендеринга DOM).

2. @JayDi извините, что вы имеете в виду селекторы jquery? например, $(‘#xx’).val() ?

3. Да, это так. Например: $(‘#dateStart’).datetimepicker({locale: ‘ru’,format: ‘ДД.ММ.ГГГГ’});

4. @JayDi $(‘.datepicker’).pickadate({selectMonths: true, selectYears: 15 }); $(‘select’).material_select(); это уже сделано.

5. @sibi Не могли бы вы уточнить, действительно ли вы используете jQuery / Materialize в этом случае? Я немного смущен, потому что в вашем исходном сообщении не упоминается ни один из них. 🙂 Если вы используете Materialize, здесь будет то, что его выбор не запускает событие изменения. Вам нужно будет зафиксировать это и запустить пользовательское событие. Это работает так, как в этом gist: gist.run/?id=4e7dd11228407e765844570409d210bd

Ответ №1:

При использовании Materialize (как стало очевидно из комментариев к исходным вопросам) элемент select не запускает никаких change событий. Вам нужно будет прослушать change событие jQuery и запустить a 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

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

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

1. Привет, Дэниел, я попробовал ваш код, он выдает ошибку консоли: «app.js: 8 Uncaught RangeError: превышен максимальный размер стека вызовов». мне нужно запустить функцию при изменении.

2. Обновлено. Я не уверен, что this внутри обработчика jQuery change действительно работает, потому что jQuery переназначает его .. Если это так, вам нужно будет назначить this другой var и использовать его внутри обработчика.

3. @MatthewJamesDavis извините, готово.проверьте и не поддержите мой … лол