javascript - 在 aurelia 中集成 select2 插件

Question

我正在集成 select2 aurelia 中的插件，我在绑定(bind)从 ajax 调用收到的数据时遇到问题，并且在渲染自定义元素后需要几秒钟。

import 'select2'
import 'select2/css/select2.css!'
import {
    bindable,
    bindingMode,
    customElement,
    inject
} from 'aurelia-framework'
import $ from 'jquery'

@customElement('select2') 
@inject(Element) 
export class CustomSelect {
    @bindable name = null 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) selected = {} 
    @bindable options = [] 
    @bindable labelField = "label"
    @bindable valueField = "value"

    constructor(element) {
        this.element = element
    }

    bind() {
      this.isComplexModel = this.options && this.options.length > 1 && (typeof this.options[0] !== "string" && typeof this.options[0] !== "number")
      this.translateModel()

      this.selectedValue = this.options[0].value
      this.selectedValue = !this.selected ? this.selectedValue : this.selected[this.valueField]
    }

    attached() {
        $(this.element).find('select')
            .val(this.selectedValue)
            .select2()
            .on('change', (event) => {
                if (this.isComplexModel) {
                  this.selected = event.currentTarget.selectedOptions[0].model
                } else {
                  this.selected = event.currentTarget.selectedOptions[0].model.value
                }
                
                let changeEvent

                if (window.CustomEvent) {
                    changeEvent = new CustomEvent('change', {
                        detail: {
                            value: event.target.value
                        },
                        bubbles: true
                    })
                } else {
                    changeEvent = document.createEvent('CustomEvent')
                    changeEvent.initCustomEvent('change', true, true, {
                        detail: {
                            value: event.target.value
                        }
                    })
                }
                $(this.element).val(event.target.value)
                this.element.dispatchEvent(changeEvent)
            })
    }

    translateModel() {
      if (this.isComplexModel) {
        this.options = this.options.map((option) => $.extend(option, {"label": option[this.labelField], "value": option[this.valueField]}))
      } else {
        this.options = this.options.map((option) => $.extend({}, {"label": option, "value": option}))
      }
    }
}

<template>
    <select name.bind="name" id.bind="name">
        <option repeat.for="option of options" value.bind="option.value" model.bind="option">${option.label}</option>
    </select>
</template>

在此代码中，attached 仅被调用一次(此时，提供的选项未定义)，并且我找不到任何方法来使用从 API 获取的最新数据来更新 select2。

我需要您的帮助才能使此自定义元素在选项更改其状态时正常工作。提前致谢!

Answer 1

我意识到这个问题被问到已经很长时间了，但我自己刚刚在 Aurelia 中完成了 Select2 v4.0.3 的实现。我想我可以在这里与你分享。这与你的方法有点不同，它可能不是完美的解决方案，但你可以看一下。也许你会受到启发:)

https://github.com/Kla3mus/select24aurelia

单选和多选模式应该可以工作。 Select2 对您设置的值有点挑剔，因此 selected 应该是一个整数数组。

它是用 typescript 编写的，而不是 JavaScript，但根据您的需要修改它应该相当容易。