Binding selectize with aurelia - selectize.js

Question

I am trying to use selectize with aurelia.io
I have created template shop.html
<template>
<input ref="content" type="text" value.two-way="shops" >
</template
and in my class shop with adnotation #customElement('shop') I
am trying to bind selectize.js to #bindable shops
attached() {
var s = $(this.content).selectize({
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});}
I am using this custom element with template books, like this:
<shop shops.two-way="selected.data.bookshops" ></shop>
Two way data binding is not working as I expected.
Selectize value is only updated for the first time.

Answer 1

I have found the need to capture selectize's change event in my custom element and propagate it to the original select input, in order for Aurelia's data binding to work. Add a change handler on the selectize to propagate the event.
// 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);
});
By bubbling up the change event, this will also allow you to add an change.delegate handler on your custom element when it is used in a view.
<selectize ... change.delegate='changeHandler()'>

Answer 2

You have to install selectize which depends on sifter, microplugin and jquery
jspm jquery
jspm install selectize
jspm install sifter
jspm install microplugin
Then you can import and use it
import $ from 'jquery';
import selectize from 'selectize';