Pregunta
Cómo implementar un enlace two-way de un objeto a un VM en aurelia.io sin perder la funcionalidad de Select2 y manteniendo el enlace completo del original, y que además los cambios en el VM se vean reflejados en el Select2.
Contexto
Estoy trabajando en un proyecto donde se ha implementado la librería aurelia.io, al tiempo que se está implementado en diversos puntos del proyecto el plugin Select2; el problema radica en que al inicializar el plugin este reemplaza el dom del por una serie de divs y otros objetos, perdiéndose así el binding con el original, el cual permanece oculto a la vista, mientras se trabaja con el nuevo artificial creado por el plugin Select2.
UPDATE 1
Este es un ejemplo de lo que se desea lograr.
Código HTML:
<label>Seleccione la línea a la que pertenece la sublínea</label>
<select value.bind="sublinea_seleccionada.LineaId">
<option repeat.for="linea of Lineas" value.bind="linea.Id" selected.bind="$parent.sublinea_actual.LineaId == linea.Id">${Linea.Nombre}</option>
</select>
<button click.delegate="asignarLineaPorDefecto()">Seleccionar línea por defecto</button>
Código TypeScript:
export class Sublineas{
Lineas: linea[] = [];
sublinea_seleccionada: subLinea = new subLinea();
mostrarIdLineaSeleccionada() {
alert(`Se ha seleccionado la Línea con Id ${this.sublinea_seleccionada.LineaId}`);
}
asignarLineaPorDefecto(){
this.sublinea_seleccionada.LineaId = 1;
}
attached() {
var self = this;
$("select").on("change", event => {
self.mostrarIdLineaSeleccionada();
});
$("select").select2();
}
}
UPDATE 2
He encontrado esta respuesta en SOenesta respuesta en SOen , pero en el ejemplo que se brinda el Select2 sólo funciona en one-way, es decir, sólo actualiza en valor en el view model pero no se actualiza con los cambios en el mismo.