Skip to main content
corrigiendo ortografía
Origen Enlace
manix
  • 667
  • 1
  • 5
  • 18

¿Por qué no se actualiza el valor en el view-model? Está librería tiene ciertas similitudes a otras librerías que usan también bind en modelos, por ejemplo, Backbone. Tanto Backbone como Aurelia "reconocen" cuando se ha realizado un cambio de valor en alguno de sus atributos ya que suscriben a eventos como "input" o "change" según sea el tipo de elemento html, y por lo tanto, es allí donde se sincronizan los cambios con la view. En su caso, ese es el único detalle que falta. Pero antes de entrar en materia de solución, debemos conocer algunos detalles importantes de la librería select2 que repercuten en el funcionar del binding de Aurelia.

Como bien usted ha manifestado, la librería select2 antepone una serie de elementos html que pretenden renderizar su propio diseño. A pesar de esto, select2 se las arregla para mostrar el valor del elemento original <select> y esto se puede confirmar al enviar el formulario. Sin embargo, se pierde un factor importante al anteponer este diseño, y es que los eventos de click y change ya no se desencadenan en el elemento original. A¿Qué quiere decir esto?, a continuación un ejemplo:

Al ejecutar el código anterior en el navegador, podemos confirmar que cada vez que el se selecciona una opción, éste nos muestra por consola el nuevo valor del select. Bien, ahora agregamos al librería select2():

Hay dos piezas del rompecabezas faltantes para una(1)la sincronización bidireccional two-way y (2)sin perder la funcionalidad del select2:

  1. Despachar el evento change programdamenteprogramadamente sobre el elemento <select> en cuestión ypara que Aurelia haráhaga el resto. Eso lo hacemos con clase.lanzarEvento(e.target):

     attached() {
         var clase = this;
         $("select").on("select2:select", function(e) {
            clase.lanzarEvento(e.target);
         });
         $("select").select2();
     }
    

    }

    Con la línea clase.lanzarEvento(e.target); estamos lanzando manualmente un evento "change" sobre el <select> original. El siguiente código contiene la definición del evento:

     lanzarEvento(elemento) {
         // creamos el evento de cambio
         var eventoDeCambio = document.createEvent('Event');
         eventoDeCambio.initEvent('change', true, true);
    
         // despachar el evento
         elemento.dispatchEvent(eventoDeCambio);
     }
    

    En este punto, Aurelia ha sido notificado y por ende terminará complementando el bind con un flujo view > view-model ya que extrarerá el valor que se encuentra en el elemento y lo actualizará elal modelo.

    En el ejemplo en línea publicado en http://plnkr.co/edit/qJOPr6?p=preview podrá ver este comportamiento.

  2. Notará que en el ejemplo anterior, al hacer click sobre el botón "Seleccionar Nissan" el componente select2 no se actualiza. Esto se debe a que, como sabemos, es un componente que no tiene ningún bind, ya que le bind está asociado directamente al (como debería ser). Entonces, ¿cómo lo resolvemos? Lamentablemente la herramienta plnkr.co no me permite empujar más allá el demo usandousado, porque no tiene habilitado el módulo de ObserverLocator que resuelve esta cuestión. Con dicho módulo podemos saber cuándo se ha hecho un cambio sobre un atributo determinado. Dicho de otra forma, el flujo sería de la siguiente forma:

     - Observando cambios sobre "auto"..
     - ¿se ha encontrado un nuevo valor?
     * si: actualizar el componente select2 (a nivel de interfaz)
     * no: flujo normal
    

    Sin embargo, acá dejo el código de referencia, al menos los cambios puntuales sobre lo que acabo de mencionar:

     // injectar el módulo
     import {ObserverLocator, inject} from 'aurelia-framework';
    
     @inject(ObserverLocator)
     export class App {
    
     // se suscribe a los cambios del atributo "auto"
     constructor(observerLocator) {
    
        var suscription = observerLocator
        .getObserver(this, 'auto')
        .subscribe(this.actualizarComponenteAutos);
        }
    
     // marcar la opción correcta en select2
     actualizarComponenteAutos(newValue, oldValue) {
         $("#auto").val(newValue).trigger("change");
       }
    

    El código fuente puede verlo completo en http://plnkr.co/edit/AZFXwo

¿Por qué no se actualiza el valor en el view-model? Está librería tiene ciertas similitudes a otras librerías que usan también bind en modelos, por ejemplo, Backbone. Tanto Backbone como Aurelia "reconocen" cuando se ha realizado un cambio de valor en alguno de sus atributos, y por lo tanto, es allí donde sincronizan los cambios con la view. En su caso, ese es el único detalle que falta. Pero antes de entrar en materia de solución, debemos conocer algunos detalles importantes de la librería select2 que repercuten en el funcionar del binding de Aurelia.

Como bien usted ha manifestado, la librería select2 antepone una serie de elementos html que pretenden renderizar su propio diseño. A pesar de esto, select2 se las arregla para mostrar el valor del elemento original <select> y esto se puede confirmar al enviar el formulario. Sin embargo, se pierde un factor importante al anteponer este diseño, y es que los eventos de click y change ya no se desencadenan en el elemento original. A continuación un ejemplo:

Al ejecutar el código anterior en el navegador, podemos confirmar que cada vez que el se selecciona una opción, éste nos muestra por consola el nuevo valor del select. Bien, ahora agregamos al librería select2():

Hay dos piezas del rompecabezas faltantes para una sincronización bidireccional two-way y sin perder la funcionalidad del select2:

  1. Despachar el evento change programdamente sobre el elemento <select> en cuestión y Aurelia hará el resto. Eso lo hacemos con clase.lanzarEvento(e.target):

     attached() {
         var clase = this;
         $("select").on("select2:select", function(e) {
            clase.lanzarEvento(e.target);
         });
         $("select").select2();
    

    }

    Con la línea clase.lanzarEvento(e.target); estamos lanzando manualmente un evento "change" sobre el <select> original. El siguiente código contiene la definición del evento:

     lanzarEvento(elemento) {
         // creamos el evento de cambio
         var eventoDeCambio = document.createEvent('Event');
         eventoDeCambio.initEvent('change', true, true);
    
         // despachar el evento
         elemento.dispatchEvent(eventoDeCambio);
     }
    

    En este punto, Aurelia ha sido notificado y por ende terminará complementando el bind con un flujo view > view-model ya que extrarerá el valor que se encuentra en el elemento y lo actualizará el modelo.

    En el ejemplo en línea publicado en http://plnkr.co/edit/qJOPr6?p=preview podrá ver este comportamiento.

  2. Notará que en el ejemplo anterior, al hacer click sobre el botón "Seleccionar Nissan" el componente select2 no se actualiza. Esto se debe a que, como sabemos, es un componente que no tiene ningún bind, ya que le bind está asociado directamente al (como debería ser). Entonces, ¿cómo lo resolvemos? Lamentablemente la herramienta plnkr.co no me permite empujar más allá el demo usando, porque no tiene habilitado el módulo de ObserverLocator que resuelve esta cuestión. Con dicho módulo podemos saber cuándo se ha hecho un cambio sobre un atributo determinado. Dicho de otra forma, el flujo sería de la siguiente forma:

     - Observando cambios sobre "auto"..
     - ¿se ha encontrado un nuevo valor?
     * si: actualizar el componente select2 (a nivel de interfaz)
     * no: flujo normal
    

    Sin embargo, acá dejo el código de referencia, al menos los cambios puntuales sobre lo que acabo de mencionar:

     // injectar el módulo
     import {ObserverLocator, inject} from 'aurelia-framework';
    
     @inject(ObserverLocator)
     export class App {
    
     // se suscribe a los cambios del atributo "auto"
     constructor(observerLocator) {
    
        var suscription = observerLocator
        .getObserver(this, 'auto')
        .subscribe(this.actualizarComponenteAutos);
        }
    
     // marcar la opción correcta en select2
     actualizarComponenteAutos(newValue, oldValue) {
         $("#auto").val(newValue).trigger("change");
       }
    

    El código fuente puede verlo completo en http://plnkr.co/edit/AZFXwo

¿Por qué no se actualiza el valor en el view-model? Está librería tiene ciertas similitudes a otras librerías que usan también bind en modelos, por ejemplo, Backbone. Tanto Backbone como Aurelia "reconocen" cuando se ha realizado un cambio de valor en alguno de sus atributos ya que suscriben a eventos como "input" o "change" según sea el tipo de elemento html, y por lo tanto, es allí donde se sincronizan los cambios con la view. En su caso, ese es el único detalle que falta. Pero antes de entrar en materia de solución, debemos conocer algunos detalles importantes de la librería select2 que repercuten en el funcionar del binding de Aurelia.

Como bien usted ha manifestado, la librería select2 antepone una serie de elementos html que pretenden renderizar su propio diseño. A pesar de esto, select2 se las arregla para mostrar el valor del elemento original <select> y esto se puede confirmar al enviar el formulario. Sin embargo, se pierde un factor importante al anteponer este diseño, y es que los eventos de click y change ya no se desencadenan en el elemento original. ¿Qué quiere decir esto?, a continuación un ejemplo:

Al ejecutar el código anterior en el navegador, podemos confirmar que cada vez que se selecciona una opción, éste nos muestra por consola el nuevo valor del select. Bien, ahora agregamos al librería select2:

Hay dos piezas del rompecabezas faltantes para (1)la sincronización bidireccional two-way y (2)sin perder la funcionalidad del select2:

  1. Despachar el evento change programadamente sobre el elemento <select> en cuestión para que Aurelia haga el resto. Eso lo hacemos con clase.lanzarEvento(e.target):

     attached() {
         var clase = this;
         $("select").on("select2:select", function(e) {
            clase.lanzarEvento(e.target);
         });
         $("select").select2();
     }
    

    Con la línea clase.lanzarEvento(e.target); estamos lanzando manualmente un evento "change" sobre el <select> original. El siguiente código contiene la definición del evento:

     lanzarEvento(elemento) {
         // creamos el evento de cambio
         var eventoDeCambio = document.createEvent('Event');
         eventoDeCambio.initEvent('change', true, true);
    
         // despachar el evento
         elemento.dispatchEvent(eventoDeCambio);
     }
    

    En este punto, Aurelia ha sido notificado y por ende terminará complementando el bind con un flujo view > view-model ya que extrarerá el valor que se encuentra en el elemento y lo actualizará al modelo.

    En el ejemplo en línea publicado en http://plnkr.co/edit/qJOPr6?p=preview podrá ver este comportamiento.

  2. Notará que en el ejemplo anterior, al hacer click sobre el botón "Seleccionar Nissan" el componente select2 no se actualiza. Esto se debe a que, como sabemos, es un componente que no tiene ningún bind, ya que le bind está asociado directamente al (como debería ser). Entonces, ¿cómo lo resolvemos? Lamentablemente la herramienta plnkr.co no me permite empujar más allá el demo usado, porque no tiene habilitado el módulo de ObserverLocator que resuelve esta cuestión. Con dicho módulo podemos saber cuándo se ha hecho un cambio sobre un atributo determinado. Dicho de otra forma, el flujo sería de la siguiente forma:

     - Observando cambios sobre "auto"..
     - ¿se ha encontrado un nuevo valor?
     * si: actualizar el componente select2 (a nivel de interfaz)
     * no: flujo normal
    

    Sin embargo, acá dejo el código de referencia, al menos los cambios puntuales sobre lo que acabo de mencionar:

     // injectar el módulo
     import {ObserverLocator, inject} from 'aurelia-framework';
    
     @inject(ObserverLocator)
     export class App {
    
     // se suscribe a los cambios del atributo "auto"
     constructor(observerLocator) {
    
        var suscription = observerLocator
        .getObserver(this, 'auto')
        .subscribe(this.actualizarComponenteAutos);
        }
    
     // marcar la opción correcta en select2
     actualizarComponenteAutos(newValue, oldValue) {
         $("#auto").val(newValue).trigger("change");
       }
    

    El código fuente puede verlo completo en http://plnkr.co/edit/AZFXwo

se añadieron 3021 caracteres en el cuerpo
Origen Enlace
manix
  • 667
  • 1
  • 5
  • 18

¿Por qué no se actualiza el valor en el view-model? Está librería tiene ciertas similitudes a otras librerías que usan también bind en modelos, por ejemplo, Backbone. Tanto Backbone como Aurelia "reconocen" cuando se ha realizado un cambio de valor en alguno de sus atributos, y por lo tanto, es allí donde sincronizan los cambios con la view. En su caso, ese es el único detalle que falta. Solo asignePero antes de entrar en materia de solución, debemos conocer algunos detalles importantes de la librería select2 que repercuten en el nuevo valor al atributofuncionar del modelobinding de Aurelia. Veamos un ejemplo:

export class Ejemplo {

  color: string = 'amarillo';
  select2: Object = '';

    attached(){
        var miClase = this;
        this.select2 = $("#color").select2();
        this.select2.on("change", function (e) {
            // note acá cómo se asigna el nuevo valor de color según la selección
            miClase.color = $(this).val();
        });
    }

    get colorSeleccionado(): string{
        return `${this.color}`;
    }
}

El método attach() realiza 2 tareas:Inconvenientes de select2.

  1. Inicializar el elemento select2

  2. Asignar el nuevo valor del color según la selección a través del componente select2:

     miClase.color = $(this).val();
    

    Cuando el valor cambia, los cambios se ven reflejados en la vista también. Esto quiere decir que se da un bind de tipo two-way;

YComo bien usted ha manifestado, la vista contienelibrería select2 antepone una serie de elementos html que pretenden renderizar su propio diseño. A pesar de esto, select2 se las arregla para mostrar el valor del elemento select con el bind deoriginal color<select> y esto se puede confirmar al enviar el formulario. Sin embargo, o biense pierde un factor importante al anteponer este diseño, si también quiere mostrar el valor actualy es que los eventos de colorclick y change ya no se desencadenan en el elemento original. A continuación un ejemplo:

<template>
    <select id="color"name='capital' value.bind="color">id="capital">
        <option value="verde">Verder<value="Santiago">Chile</option>
      <option value="San <optionJosé">Costa value="amarillo">amarillo<Rica</option>
        <option value="rojo">Rojo<value="Kingston">Jamaica</option>
    </select>

    <div>
        <label>Color seleccionado: </label>
        <p>${colorSeleccionado}</p>
    </div>
</template>

Solución por notificación de cambios. Aurelia reconoce los cambios de acuerdo Vamos a ciertos eventos, por ejemplo, enagregar el caso de los elementos selectlistener está el disparadorde evento change. Entonces, se puede despachar un evento de tipo "change" para notificarle a Aurelia que un cambio ha ocurrido. En su caso, puede hacer algo como esto común y corriente:

attached() {
    var claseelemento = this;
    $document.getElementById("select""capital");
elemento.onaddEventListener("select2:select""change", mostrarCapital);

function mostrarCapital(e) {
           claseconsole.lanzarEventolog(eelemento.targetvalue);
    });

 

Al ejecutar el código anterior en el navegador, podemos confirmar que cada vez que el se selecciona una opción, éste nos muestra por consola el nuevo valor del select. Bien, ahora agregamos al librería select2():

var elemento = $("select")document.select2getElementById("capital");
}

lanzarEvento(elemento).addEventListener("change", {mostrarCapital);
    // creamos el evento de cambio
    var eventoDeCambio =function document.createEventmostrarCapital('Event');{
    eventoDeCambioconsole.initEventlog('change', true, trueelemento.value);
}
     
// despachar eliniciar eventoselect2
    elemento$('#capital').dispatchEventselect2(eventoDeCambio);
}

Ahora la view reflejará¡Adiós eventos! Cada vez que seleccionamos una opción, no pasa nada. Ya no muestra el cambiovalor seleccionado en consola. Como nota adicionalEso se debe a que select2 no despacha tales eventos en el elemento original.

Puede comprobar este ejemplo en línea desde http://jsfiddle.net/manix/zax7f1vk/

¿Por qué se pierde el bind original del <select>?

Realmente no se pierde, he usadoy conforme a lo dicho anteriormente, select2 es tan solo otro componenente que tiene como referencia el eventovalor inicial del select2:select de select2<select>. Entonces, porque sicada vez que cargamos la página lo que se usa el eventoproduce es un changeone-way cae un overflow. Aconsejo este métodobind, ya que usted delegaría la asignaciónen efecto, select2 reconoce el valor inicial de acuerdo al bind del modelo, pero nunca se producirá un flujo view > view-model, porque los valoreseventos de los atributos acambio (change) nunca son despachados, y por lo tanto, Aurelia nunca se percata del nuevo valor del <select>.

EjemploAl fin, la solución. Le dejo un ejemplo que trabaja con ambos casos

Hay dos piezas del rompecabezas faltantes para una sincronización bidireccional two-way y sin perder la funcionalidad del select2:

  1. Despachar el evento change programdamente sobre el elemento <select> en cuestión y Aurelia hará el resto. Eso lo hacemos con clase.lanzarEvento(e.target):

     attached() {
         var clase = this;
         $("select").on("select2:select", function(e) {
            clase.lanzarEvento(e.target);
         });
         $("select").select2();
    

    }

    Con la línea clase.lanzarEvento(e.target); estamos lanzando manualmente un evento "change" sobre el <select> original. El siguiente código contiene la definición del evento:

     lanzarEvento(elemento) {
         // creamos el evento de cambio
         var eventoDeCambio = document.createEvent('Event');
         eventoDeCambio.initEvent('change', true, true);
    
         // despachar el evento
         elemento.dispatchEvent(eventoDeCambio);
     }
    

    En este punto, Aurelia ha sido notificado y por ende terminará complementando el bind con un flujo view > view-model ya que extrarerá el valor que se encuentra en el elemento y lo actualizará el modelo.

    En el ejemplo en línea publicado en http://plnkr.co/edit/qJOPr6?p=preview podrá ver este comportamiento.

  2. Notará que en el ejemplo anterior, al hacer click sobre el botón "Seleccionar Nissan" el componente select2 no se actualiza. Esto se debe a que, como sabemos, es un componente que no tiene ningún bind, ya que le bind está asociado directamente al (como debería ser). Entonces, ¿cómo lo resolvemos? Lamentablemente la herramienta plnkr.co no me permite empujar más allá el demo usando, porque no tiene habilitado el módulo de ObserverLocator que resuelve esta cuestión. Con dicho módulo podemos saber cuándo se ha hecho un cambio sobre un atributo determinado. Dicho de otra forma, el flujo sería de la siguiente forma:

     - Observando cambios sobre "auto"..
     - ¿se ha encontrado un nuevo valor?
     * si: actualizar el componente select2 (a nivel de interfaz)
     * no: flujo normal
    

    Sin embargo, acá dejo el código de referencia, al menos los cambios puntuales sobre lo que acabo de mencionar:

     // injectar el módulo
     import {ObserverLocator, inject} from 'aurelia-framework';
    
     @inject(ObserverLocator)
     export class App {
    
     // se suscribe a los cambios del atributo "auto"
     constructor(observerLocator) {
    
        var suscription = observerLocator
        .getObserver(this, 'auto')
        .subscribe(this.actualizarComponenteAutos);
        }
    
     // marcar la opción correcta en select2
     actualizarComponenteAutos(newValue, oldValue) {
         $("#auto").val(newValue).trigger("change");
       }
    

    El código fuente puede verlo completo en http://plnkr.co/edit/AZFXwo

http://plnkr.co/edit/qJOPr6?p=previewConclusión

Sé que la respuesta es muy amplia, pero había detalles que no quería pasar por alto, en especial porque quería ilustrar cómo y cuándo se daba un bind one-way y two-way.

¿Por qué no se actualiza el valor en el view-model? Está librería tiene ciertas similitudes a otras librerías que usan también bind en modelos, por ejemplo, Backbone. Tanto Backbone como Aurelia "reconocen" cuando se ha realizado un cambio de valor en alguno de sus atributos, y por lo tanto, es allí donde sincronizan los cambios con la view. En su caso, ese es el único detalle que falta. Solo asigne el nuevo valor al atributo del modelo. Veamos un ejemplo:

export class Ejemplo {

  color: string = 'amarillo';
  select2: Object = '';

    attached(){
        var miClase = this;
        this.select2 = $("#color").select2();
        this.select2.on("change", function (e) {
            // note acá cómo se asigna el nuevo valor de color según la selección
            miClase.color = $(this).val();
        });
    }

    get colorSeleccionado(): string{
        return `${this.color}`;
    }
}

El método attach() realiza 2 tareas:

  1. Inicializar el elemento select2

  2. Asignar el nuevo valor del color según la selección a través del componente select2:

     miClase.color = $(this).val();
    

    Cuando el valor cambia, los cambios se ven reflejados en la vista también. Esto quiere decir que se da un bind de tipo two-way;

Y la vista contiene el elemento select con el bind de color, o bien, si también quiere mostrar el valor actual de color:

<template>
    <select id="color" value.bind="color">
        <option value="verde">Verder</option>
        <option value="amarillo">amarillo</option>
        <option value="rojo">Rojo</option>
    </select>

    <div>
        <label>Color seleccionado: </label>
        <p>${colorSeleccionado}</p>
    </div>
</template>

Solución por notificación de cambios. Aurelia reconoce los cambios de acuerdo a ciertos eventos, por ejemplo, en el caso de los elementos select está el disparador change. Entonces, se puede despachar un evento de tipo "change" para notificarle a Aurelia que un cambio ha ocurrido. En su caso, puede hacer algo como esto:

attached() {
    var clase = this;
    $("select").on("select2:select", function(e) {
           clase.lanzarEvento(e.target);
    });

    $("select").select2();
}

lanzarEvento(elemento) {
    // creamos el evento de cambio
    var eventoDeCambio = document.createEvent('Event');
    eventoDeCambio.initEvent('change', true, true);

    // despachar el evento
    elemento.dispatchEvent(eventoDeCambio);
}

Ahora la view reflejará el cambio. Como nota adicional, he usado el evento select2:select de select2, porque si se usa el evento change cae un overflow. Aconsejo este método ya que usted delegaría la asignación de los valores de los atributos a Aurelia.

Ejemplo. Le dejo un ejemplo que trabaja con ambos casos:

http://plnkr.co/edit/qJOPr6?p=preview

¿Por qué no se actualiza el valor en el view-model? Está librería tiene ciertas similitudes a otras librerías que usan también bind en modelos, por ejemplo, Backbone. Tanto Backbone como Aurelia "reconocen" cuando se ha realizado un cambio de valor en alguno de sus atributos, y por lo tanto, es allí donde sincronizan los cambios con la view. En su caso, ese es el único detalle que falta. Pero antes de entrar en materia de solución, debemos conocer algunos detalles importantes de la librería select2 que repercuten en el funcionar del binding de Aurelia.

Inconvenientes de select2.

Como bien usted ha manifestado, la librería select2 antepone una serie de elementos html que pretenden renderizar su propio diseño. A pesar de esto, select2 se las arregla para mostrar el valor del elemento original <select> y esto se puede confirmar al enviar el formulario. Sin embargo, se pierde un factor importante al anteponer este diseño, y es que los eventos de click y change ya no se desencadenan en el elemento original. A continuación un ejemplo:

<select name='capital' id="capital">
  <option value="Santiago">Chile</option>
  <option value="San José">Costa Rica</option>
  <option value="Kingston">Jamaica</option>
</select>

Vamos a agregar el listener de evento change común y corriente:

var elemento = document.getElementById("capital");
elemento.addEventListener("change", mostrarCapital);

function mostrarCapital(){
  console.log(elemento.value);
}

Al ejecutar el código anterior en el navegador, podemos confirmar que cada vez que el se selecciona una opción, éste nos muestra por consola el nuevo valor del select. Bien, ahora agregamos al librería select2():

var elemento = document.getElementById("capital");
elemento.addEventListener("change", mostrarCapital);

function mostrarCapital(){
  console.log(elemento.value);
}
 
// iniciar select2
$('#capital').select2();

¡Adiós eventos! Cada vez que seleccionamos una opción, no pasa nada. Ya no muestra el valor seleccionado en consola. Eso se debe a que select2 no despacha tales eventos en el elemento original.

Puede comprobar este ejemplo en línea desde http://jsfiddle.net/manix/zax7f1vk/

¿Por qué se pierde el bind original del <select>?

Realmente no se pierde, y conforme a lo dicho anteriormente, select2 es tan solo otro componenente que tiene como referencia el valor inicial del <select>. Entonces, cada vez que cargamos la página lo que se produce es un one-way bind, ya que en efecto, select2 reconoce el valor inicial de acuerdo al bind del modelo, pero nunca se producirá un flujo view > view-model, porque los eventos de cambio (change) nunca son despachados, y por lo tanto, Aurelia nunca se percata del nuevo valor del <select>.

Al fin, la solución

Hay dos piezas del rompecabezas faltantes para una sincronización bidireccional two-way y sin perder la funcionalidad del select2:

  1. Despachar el evento change programdamente sobre el elemento <select> en cuestión y Aurelia hará el resto. Eso lo hacemos con clase.lanzarEvento(e.target):

     attached() {
         var clase = this;
         $("select").on("select2:select", function(e) {
            clase.lanzarEvento(e.target);
         });
         $("select").select2();
    

    }

    Con la línea clase.lanzarEvento(e.target); estamos lanzando manualmente un evento "change" sobre el <select> original. El siguiente código contiene la definición del evento:

     lanzarEvento(elemento) {
         // creamos el evento de cambio
         var eventoDeCambio = document.createEvent('Event');
         eventoDeCambio.initEvent('change', true, true);
    
         // despachar el evento
         elemento.dispatchEvent(eventoDeCambio);
     }
    

    En este punto, Aurelia ha sido notificado y por ende terminará complementando el bind con un flujo view > view-model ya que extrarerá el valor que se encuentra en el elemento y lo actualizará el modelo.

    En el ejemplo en línea publicado en http://plnkr.co/edit/qJOPr6?p=preview podrá ver este comportamiento.

  2. Notará que en el ejemplo anterior, al hacer click sobre el botón "Seleccionar Nissan" el componente select2 no se actualiza. Esto se debe a que, como sabemos, es un componente que no tiene ningún bind, ya que le bind está asociado directamente al (como debería ser). Entonces, ¿cómo lo resolvemos? Lamentablemente la herramienta plnkr.co no me permite empujar más allá el demo usando, porque no tiene habilitado el módulo de ObserverLocator que resuelve esta cuestión. Con dicho módulo podemos saber cuándo se ha hecho un cambio sobre un atributo determinado. Dicho de otra forma, el flujo sería de la siguiente forma:

     - Observando cambios sobre "auto"..
     - ¿se ha encontrado un nuevo valor?
     * si: actualizar el componente select2 (a nivel de interfaz)
     * no: flujo normal
    

    Sin embargo, acá dejo el código de referencia, al menos los cambios puntuales sobre lo que acabo de mencionar:

     // injectar el módulo
     import {ObserverLocator, inject} from 'aurelia-framework';
    
     @inject(ObserverLocator)
     export class App {
    
     // se suscribe a los cambios del atributo "auto"
     constructor(observerLocator) {
    
        var suscription = observerLocator
        .getObserver(this, 'auto')
        .subscribe(this.actualizarComponenteAutos);
        }
    
     // marcar la opción correcta en select2
     actualizarComponenteAutos(newValue, oldValue) {
         $("#auto").val(newValue).trigger("change");
       }
    

    El código fuente puede verlo completo en http://plnkr.co/edit/AZFXwo

Conclusión

Sé que la respuesta es muy amplia, pero había detalles que no quería pasar por alto, en especial porque quería ilustrar cómo y cuándo se daba un bind one-way y two-way.

se añadieron 2 caracteres en el cuerpo
Origen Enlace
manix
  • 667
  • 1
  • 5
  • 18

Solución por notificación de cambios. Aurelia reconoce los cambios de acuerdo a ciertos eventos, por ejemplo, en el caso de los elementos select está el disparador change. Entonces, se puede despachar un evento de tipo "change" para notificarle a Aurelia que un cambio ha ocurrido. En su caso, puede hacer algo como esto:

attached() {
    var clase = this;
    $("select").on("select2:select", function(e) {
           thisclase.lanzarEvento(e.target);
    });

    $("select").select2();
}

lanzarEvento(elemento) {
    // creamos el evento de cambio
    var eventoDeCambio = document.createEvent('Event');
    eventoDeCambio.initEvent('change', true, true);

    // despachar el evento
    elemento.dispatchEvent(eventoDeCambio);
}

Solución por notificación de cambios Aurelia reconoce los cambios de acuerdo a ciertos eventos, por ejemplo, en el caso de los elementos select está el disparador change. Entonces, se puede despachar un evento de tipo "change" para notificarle a Aurelia que un cambio ha ocurrido. En su caso, puede hacer algo como esto:

attached() {
    var clase = this;
    $("select").on("select2:select", function(e) {
           this.lanzarEvento(e.target);
    });

    $("select").select2();
}

lanzarEvento(elemento) {
    // creamos el evento de cambio
    var eventoDeCambio = document.createEvent('Event');
    eventoDeCambio.initEvent('change', true, true);

    // despachar el evento
    elemento.dispatchEvent(eventoDeCambio);
}

Solución por notificación de cambios. Aurelia reconoce los cambios de acuerdo a ciertos eventos, por ejemplo, en el caso de los elementos select está el disparador change. Entonces, se puede despachar un evento de tipo "change" para notificarle a Aurelia que un cambio ha ocurrido. En su caso, puede hacer algo como esto:

attached() {
    var clase = this;
    $("select").on("select2:select", function(e) {
           clase.lanzarEvento(e.target);
    });

    $("select").select2();
}

lanzarEvento(elemento) {
    // creamos el evento de cambio
    var eventoDeCambio = document.createEvent('Event');
    eventoDeCambio.initEvent('change', true, true);

    // despachar el evento
    elemento.dispatchEvent(eventoDeCambio);
}
Se ha agregado un ejemplo que desmuestra la solución en vivo
Origen Enlace
manix
  • 667
  • 1
  • 5
  • 18
Loading
se añadieron 1053 caracteres en el cuerpo
Origen Enlace
manix
  • 667
  • 1
  • 5
  • 18
Loading
cuerpo editado
Origen Enlace
manix
  • 667
  • 1
  • 5
  • 18
Loading
Origen Enlace
manix
  • 667
  • 1
  • 5
  • 18
Loading