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

使用Materialise时（从原始问题的评论中可以明显看出），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＆＃34;技巧＆＃34;是必需的，因为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使用Materialise，你也可以使用Materialise桥：http://aurelia-ui-toolkits.github.io/demo-materialize/#/about

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

Aurelia Js选择盒子不工作

1 个答案: