Aurelia 中的 bootstrap-multiselect 插件

Question

我正在尝试让 bootstrap-multiselect 与 Aurelia 一起工作。已经或多或少地让它工作了，但不确定它是否是最好的解决方案，或者我是否可能运行遇到麻烦。

Bootstrap-multiselect 是一个 jquery 插件，可以将普通的 select（多）变成带复选框的下拉菜单（http://davidstutz.github.io/bootstrap-multiselect/）

我的第一个问题是让它与动态创建的选项一起工作。当我的选项数组（创建为可绑定属性）更改时，我通过使用插件 "rebuild" 功能解决了这个问题。然而，原始 select has 的选项尚未创建，因此我使用 setTimeout 延迟重建，因此 Aurelia 重建了 select。感觉像是一个 "dirty" 解决方案，我对 Aurelia 生命周期知之甚少，无法确保它始终有效。

第二个问题是组件的值不会更新，但是更改方法会触发。我通过触发一个更改事件解决了这个问题（为其他一些执行相同操作的插件找到了一个示例）。工作正常，值将被更新，但 change 方法将触发两次。这不是什么大问题，但如果更改完成一些耗时的工作（例如从数据库中获取数据等），则可能是个问题。

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

       <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) => {
                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');
    }
}

Answer 1

您的第一个问题可以通过将 $(this.element).find('select').multiselect('rebuild'); 推送到 optionsChanged() 处理程序内的 microTaskQueue 来解决。这样，Aurelia 就会在渲染新选项后触发这个事件。

你的第二个问题其实不是问题。发生的情况是 @bindable 属性默认为 one-way。您应该将 value 属性声明为 two-way。然后，您应该更新 multiselect.change 事件中的 value。

最后，您的自定义元素应该是这样的：

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

运行示例：https://gist.run/?id=60d7435dc1aa66809e4dce68329f4dab

希望对您有所帮助！

Aurelia 中的 bootstrap-multiselect 插件

boostrap-multiselect plugin in Aurelia

aurelia

bootstrap-multiselect