綁定selectize與奧裏利亞

我想使用selectize與aurelia.io 我已經創建的模板shop.html綁定selectize與奧裏利亞

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

雙向數據綁定不工作如我所料。選擇性值只是第一次更新。

來源

2016-04-26 Dariusz Filipiak

您必須安裝selectize取決於篩，microplugin和的jQuery

jspm jquery 
jspm install selectize 
jspm install sifter 
jspm install microplugin

然後你可以導入和使用它

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

來源

2016-04-26 21:03:45 kabaehr

我已經完成了。問題在於綁定選擇對象。我想在selectize輸入中實現雙向數據綁定。 –

我已經找到了需要在我的自定義元素中捕獲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()'>

來源

2016-11-18 21:12:38 mujimu

請不要張貼鏈接到要點，把代碼放入你的答案。請參閱[答案] – durron597

這是不正確的。從您的常見問題解答：只要提供上下文，「鼓勵與外部資源的鏈接......」。但是，我編輯了我的答案，因爲我的方法稍微改變了原來的要點。 – mujimu

[請閱讀這個元問題，因爲它直接解決你的問題]（http://meta.stackoverflow.com/questions/326744/github-links-as-answers/326745#326745） – durron597

綁定selectize與奧裏利亞

回答

相關問題