我正在尝试使用bootstrap-multiselect与Aurelia合作.让它工作或多或少,但不确定它是最好的解决方案,还是我可能遇到麻烦.
Bootstrap-multiselect是一个jquery插件,可以将正常的select(multi)转换为带有复选框的下拉列表(http://davidstutz.github.io/bootstrap-multiselect/)
我的第一个问题是让它使用动态创建的选项.当我的选项数组(作为可绑定属性创建)发生更改时,我通过使用插件"rebuild"功能解决了这个问题.然而原始选择的选项还没有创建,所以我使用setTimeout来延迟重建,所以Aurelia重建了选择.感觉就像一个"肮脏"的解决方案,我对Aurelia的生活方式知之甚少,以确保它始终有效.
第二个问题是组件的值不会更新,但更改方法将触发.我通过触发更改事件解决了这个问题(找到了一些其他插件的例子).工作正常,价值将被更新,但更改方法将触发两次.这不是一个大问题,但如果更改会耗费一些时间(例如从数据库中获取数据等),则可能会出现问题.
有什么改进代码的建议吗？
<template>
<select value.bind="value" multiple="multiple">
<option repeat.for="option of options"Value.bind="option.value">${option.label}</option>
</select>
</template>
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) => …