javascript - 使用 Materialise css 在 Aurelia 中选择

Question

我正在尝试使用 Materialise css 创建一个选择下拉列表 在我的模板文件 order.html 中。我有以下内容

<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">

我的问题是如何在 order.js 中使用 jquery $('select').material_select(); 以便使其正常工作。 谢谢

Answer 1

尽量避免在 View 模型中使用 jQuery。如果您要操作 DOM(使用或不使用 jQuery)，请创建 custom attribute或custom element .

已经有一些 Aurelia plugins for Materialize CSS您可以使用。但是，如果您不需要一些高级选项，您可以创建自己的简单属性，如下所示:

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 plugin .