¿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.
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. ¿Qué quiere decir esto?, 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 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 (1)la sincronización bidireccional two-way
y (2)sin perder la funcionalidad del select2:
Despachar el evento
change
programadamente sobre el elemento<select>
en cuestión para que Aurelia 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á al 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 usado, 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
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
.