Aurelia中的boostrap-multiselect插件

我正在尝试使用bootstrap-multiselect与Aurelia合作.让它工作或多或少,但不确定它是最好的解决方案,还是我可能遇到麻烦.

Bootstrap-multiselect是一个jquery插件,可以将正常的select(multi)转换为带有复选框的下拉列表(http://davidstutz.github.io/bootstrap-multiselect/)

我的第一个问题是让它使用动态创建的选项.当我的选项数组(作为可绑定属性创建)发生更改时,我通过使用插件"rebuild"功能解决了这个问题.然而原始选择的选项还没有创建,所以我使用setTimeout来延迟重建,所以Aurelia重建了选择.感觉就像一个"肮脏"的解决方案,我对Aurelia的生活方式知之甚少,以确保它始终有效.

第二个问题是组件的值不会更新,但更改方法将触发.我通过触发更改事件解决了这个问题(找到了一些其他插件的例子).工作正常,价值将被更新,但更改方法将触发两次.这不是一个大问题,但如果更改会耗费一些时间(例如从数据库中获取数据等),则可能会出现问题.

有什么改进代码的建议吗？

import {customElement, bindable, inject} from 'aurelia-framework';
import 'jquery';
import 'bootstrap';
import 'davidstutz/bootstrap-multiselect';

@inject(Element)
export class MultiSelect {

    @bindable value: any;
    @bindable options: {};
    @bindable config: {};

    constructor(private element) {
        this.element = element;
    }

    optionsChanged(newVal: any, oldVal: any) {
        setTimeout(this.rebuild, 0);
    }

    attached() {
        var selElement = $(this.element).find('select');
        selElement.multiselect(
            {
                includeSelectAllOption: true,
                selectAllText: "(All)",
                selectAllNumber: false,
                numberDisplayed: 1,
                buttonWidth: "100%"

            })
           .on('change', (event) => {
                if (event.originalEvent) { return; }
                var notice = new Event('change', { bubbles: true });
                selElement[0].dispatchEvent(notice);
            });
    }

    detached()  {
        $(this.element).find('select').multiselect('destroy');
    }
    
    rebuild = () => {
        $(this.element).find('select').multiselect('rebuild');
    }
}