Question

我正在尝试使用aurelia.io进行选择我创建了模板shop.html

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

并在我的类商店中添加了注释 @customElement（'shop'） I 我试图将 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

我发现需要在我的自定义元素中捕获选择性更改事件并将其传播到原始选择输入，以便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()'>

Answer 2

您必须安装 selectize ，这取决于 sifter ， microplugin 和 jquery

jspm jquery
jspm install selectize
jspm install sifter
jspm install microplugin

然后你可以导入并使用它

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

与aurelia结合选择

2 个答案: