使用Materialize CSS在Aurelia中选择

Question

我正在尝试在模板文件order.html使用Materialize CSS创建选择下拉列表。 我有以下

<div class="row">
    <div class="input-field col s12">
        <select multiple>
          <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>
      </div>
</div>

为了使其工作，我正在使用jquery进行以下调用

$('select').material_select();

我也正在导入以下库：

     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">

我的问题是我如何使用jquery $('select').material_select(); 在order.js这样我可以使它发挥作用。 谢谢

Answer 1

尝试避免在视图模型中使用jQuery。 如果要操作DOM（使用或不使用jQuery），请创建custom属性或custom element 。

您已经可以使用一些用于Materialize CSS的 Aurelia 插件 。 但是，如果不需要某些高级选项，则可以创建自己的简单属性，如下所示：

import {customAttribute} from 'aurelia-templating';
import {inject} from 'aurelia-dependency-injection';
import $ from 'jquery';

@customAttribute('material-select')
@inject(Element)
export class MaterialSelect {
  constructor(element) {
    this.element = element;
  }

  attached() {
    $(this.element).material_select();
  }

  detached() {
    $(this.element).material_select('destroy');
  }
}

代码来自较旧版本的Aurelia Materialize插件 。