Aurelia + Select2 niestandardowy element nie propagujący wybrany zmieniony

Question

Stworzyłem niestandardowy element w 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'); 
    } 
} 

I to jest szablon:

<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> 

używam kontroli takiego:

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

i model jest:

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

Teraz wszystko działa dobrze, gdybym zmień pojemnik wyboru i początkowy ding. Ale jeśli zmienię model.countryId z ie. 1 do 2, zmiana nie jest odzwierciedlona w sterowaniu wyboru, kontrolka nadal wyświetla "USA", tak jak wybrano opcję 1. Ponieważ "wybrana" właściwość jest powiązana dwukierunkowo, oczekiwałbym, że zaktualizuje zaznaczenie po zmianie. Ale tak nie jest. Czemu? Co robię źle?

Proszę o pomoc

Answer 1

Ok, I wprowadziły go jak w tym poście: Custom Select2 Aurelia component

i działa idealnie.

Answer 2

to dlatego, że używasz wersji data który oczekuje obiektu, ale trzeba ustawić swoją wybierz pracować tylko wartości id. Dlatego powinieneś użyć val, aby przekazać identyfikator.

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