¿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:
Despachar el evento
change
programdamenteprogramadamente sobre el elemento<select>
en cuestión ypara que Aurelia haráhaga el resto. Eso lo hacemos conclase.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.
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 deObserverLocator
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