Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Origen Enlace

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.

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 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.

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 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.

Aviso eliminado Atraer atención por Henry Rodriguez
Recompensa finalizada con user950's answer elegida por Henry Rodriguez
Se ha editado la pregunta para aclarar el concepto, se mejoró el ejemplo.
Origen Enlace

two-way bind con Select2 +en aurelia.io

Pregunta

Cómo enlazar apropiadamenteimplementar un enlace two-way de un objeto a un VM deen 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 del select binding con el original, el cual permanece oculto a la vista, mientras se trabaja con el nuevo select  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="currentSubLineabind="sublinea_seleccionada.Id">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 Linea Sublineas{

    Lineas: linea[] = [];
    currentSubLineasublinea_seleccionada: subLinea = new subLinea();   

    showSelectedLineaIdmostrarIdLineaSeleccionada() { 

         alert(`Se ha seleccionado la Línea con Id ${this.currentSubLineasublinea_seleccionada.IdLineaId}`); 

    }

    asignarLineaPorDefecto(){

        this.sublinea_seleccionada.LineaId = 1;

    }

    attached() { 

       var self = this;
  
        $("select").on("change", event => {

           showSelectedLineaIdself.mostrarIdLineaSeleccionada();

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

    }


}

UPDATE 2

He encontrado esta 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.

Select2 + aurelia.io

Pregunta

Cómo enlazar apropiadamente un objeto a un VM de aurelia.io sin perder la funcionalidad de Select2 y manteniendo el enlace completo del original.

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 del select binding original, el cual permanece oculto a la vista, mientras se trabaja con el nuevo select 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="currentSubLinea.Id">
       <option repeat.for="linea of Lineas" value.bind="linea.Id">${Linea.Nombre}</option>
</select>

Código TypeScript:

export class Linea {

    Lineas: linea[] = [];
    currentSubLinea: subLinea = new subLinea();   

    showSelectedLineaId() { 

         alert(this.currentSubLinea.Id);    

    }

    attached() {
  
        $("select").on("change", event => {

           showSelectedLineaId();

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

    }


}

UPDATE 2

He encontrado esta 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.

two-way bind con Select2 en aurelia.io

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 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.

Se agregó tag del lenguaje
Enlace
Carlos Muñoz
  • 13.5k
  • 2
  • 47
  • 67
cuerpo editado
Origen Enlace
Jorgesys
  • 111.1k
  • 14
  • 55
  • 134
Loading
Aviso añadido Atraer atención por Henry Rodriguez
Recompensa iniciada por un valor de 50 de reputación por Henry Rodriguez
agregados, nuevos ejemplos
Origen Enlace
Loading
se agregó ejemplo
Origen Enlace
Loading
se agregó ejemplo
Origen Enlace
Loading
se añadieron 285 caracteres en el cuerpo
Origen Enlace
Loading
Origen Enlace
Loading