aurelia - Aurelia 中的 bootstrap-multiselect 插件

Question

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

Bootstrap-multiselect 是一个 jquery 插件，它将普通选择(多重)转换为带有复选框的下拉菜单( http://davidstutz.github.io/bootstrap-multiselect/ )

我的第一个问题是让它与动态创建的选项一起工作。当我的选项数组(作为可绑定(bind)属性创建)更改时，我通过使用插件“重建”功能解决了这个问题。然而，原始选择的选项尚未创建，因此我使用 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) => {
                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默认情况下，属性是单向的。您应该声明value属性为双向。然后，您应该更新 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');
      });
    }
  }
}

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

希望这有帮助!