¿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:
Inicializar el elemento select2
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) {
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);
}
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.