Выберите в Aurelia с помощью Materialize css

Question

Я пытаюсь создать выпадающее меню, используя Materialize 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"> 

Мой вопрос как я могу использовать jquery $('select').material_select(); в order.js, чтобы я мог заставить его работать. Thanks

Answer 1

Старайтесь избегать использования 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.