Aurelia + Select2 自定义元素不传播选定更改

Question

我在 Aurelia 中创建了自定义元素。

import {bindable, inject, customElement, bindingMode} from 'aurelia-framework';
import 'select2';
import * as $ from 'jquery';
import {BindingSignaler} from "aurelia-templating-resources";

@customElement('select2')
@inject(Element, BindingSignaler)
export class Select2CustomMultiselect {
    @bindable name = null;    // name/id of custom select
    @bindable selected = null;  // default selected values
    @bindable ({defaultBindingMode: bindingMode.oneWay, attribute:"options"}) source:Array<{id:number, name:any}>= [];   // array of options with id/name properties
    @bindable placeholder = "";
    @bindable allow_clear = true;
    private $select2: $;

    constructor(private element, private signaler:BindingSignaler) {
    }

    attached() {
        let $select = $(this.element).find('select');
        this.$select2 = $select.select2({theme: 'bootstrap', placeholder: this.placeholder});

        // on any change, propagate it to underlying select to trigger two-way bind
        this.$select2.on('change', (event) => {
            if (event.originalEvent) { return; }

            const select2Value = this.$select2.val();
            if(select2Value == this.selected) { return; }

            // dispatch to raw select within the custom element
            var notice = new Event('change', {bubbles: true});
            event.target.dispatchEvent(notice);
        });

        this.$select2.val(this.selected);//.trigger('change');
    }

    selectedChanged(newValue,oldValue){
        console.log(newValue);
    }

    detached() {
        $(this.element).find('select').select2('destroy');
    }
}

它的模板：

<template>
    <select value.two-way="selected" name.one-way="name" id.one-way="name" class="form-control"  data-allow-clear.one-way="allow_clear" size="1">
        <option></option>
        <option repeat.for="src of source" model.bind="src.id">${src.name & t}</option>
    </select>
</template>

我是这样使用控件的：

<select2 name="payingBy" selected.two-way="model.countryId & validate" options.bind="countries" placeholder="${'Select' & t}" allow_clear="true"></select2>

模型是：

countries:Array<{id:number, name:string}> = [{id:1, name:"USA"}, {id:2, name:Canada'}];
model.countryId: number;

现在，如果我更改 select 并在初始绑定时一切正常。但是，如果我从 ie 中更改 model.countryId。 1 到 2，更改没有反映在 select 控件中，控件仍然显示 "USA"，就像 1 被 selected 一样。因为 'selected' 属性是双向绑定的，所以我希望它在更改时更新 select 。但事实并非如此。为什么？我做错了什么？

请帮忙

Answer 1

那是因为您正在使用需要对象的 data 版本，但您已将 select 设置为仅使用 id 值。所以你应该使用 val 来传递 id。

selectedChanged(newValue, oldValue) {
    console.log(newValue);
    if (this.select2) {
      this.select2.select2({
        val: newValue, // << changed this from data: newValue
        theme: 'bootstrap',
        placeholder: this.placeholder
      });
    }

Answer 2

好的，我是这样实现的 post:Custom Select2 Aurelia component

而且效果很好。

Aurelia + Select2 自定义元素不传播选定更改

Aurelia + Select2 custom element not propagating selected changed

binding

custom-element

aurelia

select2