绑定selectize与奥里利亚

Question

我想使用selectize与aurelia.io 我已经创建的模板shop.html

<template> 
    <input ref="content" type="text" value.two-way="shops" > 
</template 

我 类店

与adnotation @customElement（ '店'）我 我想要绑定selectize.js到@Bindable商店

attached() { 
    var s = $(this.content).selectize({ 
     delimiter: ',', 
     persist: false,  
     create: function(input) { 
      return { 
       value: input, 
       text: input 
      } 
     }   
    });} 

我使用这个自定义元素与模板的书，像这样：

<shop shops.two-way="selected.data.bookshops" ></shop> 

双向数据绑定不工作如我所料。 选择性值只是第一次更新。

Answer 1

您必须安装selectize取决于筛，microplugin和的jQuery

jspm jquery 
jspm install selectize 
jspm install sifter 
jspm install microplugin 

然后你可以导入和使用它

import $ from 'jquery'; 
import selectize from 'selectize'; 

Answer 2

我已经找到了需要在我的自定义元素中捕获selectize的更改事件并将其传播到o严格的选择输入，以便Aurelia的数据绑定工作。在选择上添加更改处理程序以传播事件。

// init selectize 
    this.sel = el.selectize(opts)[0]; // first element 

    // on change after setting initial value 
    this.sel.selectize.on('change',() => { 
     // no event param passed in 
     console.log(`Selectize change event`); 
     // dispatch to raw select within the custom element for data binding trigger 
     // bubble it up to custom event in case change event is handled 
     let notice = new Event('change', {bubbles: true}); 
     $(el)[0].dispatchEvent(notice); 
    }); 

通过冒泡的变化情况，这也将让你当它在一个视图中使用您的自定义元素上添加change.delegate处理程序。

<selectize ... change.delegate='changeHandler()'>