binding - Elemento personalizado Aurelia+Select2 que no se propaga seleccionado seleccionado cambiado

custom-element aurelia-framework

Question

Creé un elemento personalizado en 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'');
    }
}

Y es plantilla:

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

Yo uso el control de esta manera:

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

Y el modelo es:

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

Ahora, todo funciona bien si cambio la selección y el enlace inicial. Pero si cambio el model.countryId de ie. 1 a 2, el cambio no se refleja en el control de selección, el control aún muestra "EE. UU." Cuando se selecciona como 1. Como la propiedad ''seleccionada'' se une en ambos sentidos, esperaría que actualice la selección cuando cambie. Pero no es así ¿Por qué? ¿Qué estoy haciendo mal?

Por favor ayuda

Answer 1

Esto se debe a que está utilizando la versión de data que espera un objeto, pero ha configurado su selección para que funcione solo con el valor del id . Entonces deberías usar el val para pasar la identificación.

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

Ok, lo implementé como en esta publicación: componente Custom Select2 Aurelia

Y funciona perfectamente.