Aurelia Js select 盒子不工作

Question

我是 Aurelia Js 的新手，在这里，我使用的是一个简单的 select 框，但它在更改值时不起作用。

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

注意：suspendUpdate "trick" 是必需的，因为 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

当然，如果您将 Materialise 与 Aurelia 结合使用，您也可以使用 Materialise 桥：http://aurelia-ui-toolkits.github.io/demo-materialize/#/about

免责声明：我是 Aurelia Materialise 桥的创建者之一。

Aurelia Js select 盒子不工作

Aurelia Js select box not working

jquery-plugins

aurelia