Binding selectize mit aurelia

Question

Ich versuche selectize mit aurelia.io zu verwenden I Vorlage shop.html

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

und in meinem Klasse Shop mit adnotation @customElement ('Laden') erstellt haben ich bin versucht, selectize.js zu @bindable Geschäfte

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

zu binden

Ich bin mit diesem benutzerdefinierten Element mit Vorlage Bücher, wie folgt aus:

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

Zwei-Wege-Datenbindung funktioniert nicht wie ich erwartet hatte. Auswahlwert wird nur zum ersten Mal aktualisiert.

Answer 1

Sie haben selectize installieren, die auf Sichter abhängt, microplugin und jquery

jspm jquery 
jspm install selectize 
jspm install sifter 
jspm install microplugin 

Dann können Sie es importieren und verwenden

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

Answer 2

Ich habe gefunden, die müssen das Änderungsereignis von selectize in mein benutzerdefiniertes Element aufnehmen und es an das o weiterleiten riginale Auswahleingabe, damit die Datenbindung von Aurelia funktioniert. Fügen Sie einen Change-Handler für selectize hinzu, um das Ereignis zu propagieren.

// 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); 
    }); 

Durch das Änderungsereignis sprudelt, dies ermöglicht es Ihnen auch einen change.delegate Handler auf Ihrem benutzerdefiniertes Element hinzufügen, wenn es in einer Ansicht verwendet wird.

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