Stworzyłem niestandardowy element w Aurelia.Aurelia + Select2 niestandardowy element nie propagujący wybrany zmieniony
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
Właściwie to aktualizuje bazowy wybór, ale nie Select2 – Luka
Zrobiłem też plunker: http://plnkr.co/edit/UTHR6f?p=preview – Luka
Czy to jest istotne? http://stackoverflow.com/questions/19639951/how-do-i-change-selected-value-of-select2-dropdown- with-jqgrid – dpix