Aurelia中的boostrap multiselect插件

我正试图让bootstrap multiselect与Aurelia合作。我已经让它或多或少的工作，但不确定这是最好的解决方案，或者如果我可能会遇到麻烦

Bootstrap multiselect是一个jquery插件，它将普通的select multi转换为带有复选框的下拉列表

我的第一个问题是让它使用动态创建的选项。当作为可绑定属性创建的选项数组发生更改时，我使用插件重建功能解决了这个问题。但是，原始select hhas的选项尚未创建，因此我使用setTimeout延迟重建，以便Aurelia重建select。感觉像是一个肮脏的解决方案，我对奥雷莉亚生命周期知之甚少，以确保它永远有效

第二个问题是组件的值不会被更新，但是更改方法会触发。我通过触发一个变更事件解决了这个问题，并为其他插件找到了一个同样的例子。工作正常，值将被更新，但更改方法将触发两次。这不是一个大问题，但是如果一个变更做了一些耗时的工作，比如从数据库获取数据等，那么它可能会成为一个问题

有什么改进代码的建议吗

       <template>
          <select value.bind="value" multiple="multiple">
              <option repeat.for="option of options"Value.bind="option.value">${option.label}</option>
           </select>
       </template>

---

第一个问题可以通过按下$this.element.find'select'.multiselect'rebuild'按钮来解决；在OptionChanged处理程序内的microTaskQueue上。这样，Aurelia将在呈现新选项后触发此事件

你的第二个问题实际上不是问题。目前的情况是@bindable属性在默认情况下是单向的。您应该将value属性声明为双向。然后，您应该更新multiselect.change事件中的值

最后，您的自定义元素应该如下所示：

import {inject, bindable, bindingMode, TaskQueue} from 'aurelia-framework';

@inject(TaskQueue)
export class MultiselectCustomElement {

  @bindable options;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) value = [];

  constructor(taskQueue) {
   this.taskQueue = taskQueue;
  }

  attached() {
    $(this.select).multiselect({ 
      onChange: (option, checked) => {
        if (checked) {
          this.value.push(option[0].value);
        } else {
          let index = this.value.indexOf(option[0].value);
          this.value.splice(index, 1);
        }
      }
    });
  }

  optionsChanged(newValue, oldValue) {
    if (oldValue) { 
      this.taskQueue.queueTask(() => { 
        this.value = [];
        $(this.select).multiselect('rebuild');
      });
    }
  }
}

运行示例：

---

希望这有帮助

我在数据表方面也遇到过类似的问题，最后我自己写了。Aurelia的绑定非常惊人，但我还没有学会在DOM更新完成时触发事件的方法。这就是您想要关注的地方——如何在正确的时刻运行组件的重建方法。谢谢您的建议。很抱歉直到现在才回复你。你费心帮助我，我真是太粗鲁了。直到现在，我还在处理项目的其他部分，所以忘记了这一点，因为这是一种工作方式。我认为BindSign默认情况下是双向的=确实将select上的模板中的绑定更改为value.two-way。我会尝试你的代码，这是干净的。无法在代码中选择选定的值，但将尝试使其正常工作。