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; 

現在，一切工作正常，如果我更改選擇並打開初始箱丁。 但是，如果我改變model.countryId從ie。 1到2，變化沒有反映在選擇控制中，控制仍像「1」一樣顯示「USA」。 因爲'selected'屬性是雙向綁定的，我希望它在更改時更新select。但事實並非如此。爲什麼？ 我在做什麼錯？

請幫

Answer 1

好吧，我實現了它喜歡在這個崗位：Custom Select2 Aurelia component

而且它完美的作品。

Answer 2

那是因爲你使用的是data版本，它期望的對象，但你已經設置你的選擇只與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 
     }); 
    }