10

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.

2
  • 5
    Seria bueno que colocaras un ejemplo que haz o hayas hecho, ya que así es mas fácil conocer que deseas.
    – Wilfredo
    Commented el 3 dic. 2015 a las 2:09
  • 1
    es.stackoverflow.com/questions/302/…
    – user8736
    Commented el 5 jun. 2016 a las 5:45

2 respuestas 2

5

¿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:

  1. Despachar el evento change programadamente sobre el elemento <select> en cuestión para que Aurelia haga el resto. Eso lo hacemos con clase.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.

  2. 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 de ObserverLocator 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.

6
  • 1
    primero quiero aclarte que yo no te vote en contra. segundo una sugerencia: para redondear el post podrías modificar el plunkr que esta asociado a la pregunta vinculada de Stack Overflow con tus cambios y demostrar que esta solución funciona. Eso haría de esta respuesta, que parece buena, una respuesta completa. Commented el 7 dic. 2015 a las 6:03
  • @rnrneverdies, muchas gracias por su comentario. Ahora bien, disculpe mi ignorancia, pero ¿qué es plunkr?
    – manix
    Commented el 7 dic. 2015 a las 6:08
  • 2
    Es como jsfiddle, este es el link al plunkr que te mencione: plnkr.co/edit/mEpr8E?p=preview puedes forkearlo y resolver ahi el asunto, quedaria funcionado una demo que cualquiera puede ver si pones el vinculo a tu fork en la pregunta. Commented el 7 dic. 2015 a las 6:10
  • Ya entiendo, perfectísimo. El jsfiddle ya le conocía. Muy amable.
    – manix
    Commented el 7 dic. 2015 a las 6:13
  • Una respuesta completísima, pero en el ejemplo de plunkr que nos regalas no se ve reflejada la solución de two-way binding, sería genial si nos pudieras regalar un ejemplo de este tipo entre dos Select2 mediante el binding de aurelia. Por otra parte noto que mi pregunta está incompleta o no refleja 100% lo que se quiere, así que trataré de editarla para dar a entender de mejor forma lo que se busca. Commented el 7 dic. 2015 a las 17:56
0
+50

Enlazar un objeto a una opción Select2?

Tengo un formulario Select2 así:

<require from="./select2"></require>
<select select2="selected-values.two-way: selectedStuff" data-placeholder="Choose Stuff" multiple>
    <option repeat.for="thing of stuff">${thing.id}</option>
</select>

Con el cuál yo puedo acceder a selectedStuff, el cual es un arreglo de las ids de las cosas que he seleccionado. Sin embargo, me gustaría obtener un arreglo de esas cosas y no de sus ids. En mi caso de uso, no es viable buscar algo desde su id.

Hay alguna forma de obligar al objeto del elemento de entregarme un arreglo de las cosas que necesito en vez de un arreglo de sus ids?

Respuesta:

El valor del atributo del elemento <option> sólo acepta cadenas. Usa el modelo del atributo para almacenar los elementos no-cadena:

<select select2 multiple value.bind="selectedThing2">
  <option repeat.for="thing of things" model.bind="thing">${thing.name}</option>
</select>

Acá hay plunker funcionado:

Aquí esta la documentación relacionada en aurelia:

Preguntas relacionadas:

  • How to change the css of color of select2 tags?
  • Using select2 with multiple choices and duplicate id values
  • Programmatic selection of select2 which retrieves its data via Ajax
  • Select2 with ajax, multiple and knockout binding not saving objects to selectedOptions
  • Preselect values in Select2 for ajax cases
  • Select2 4.0 - initialize with tag not in data list
  • Show 2 options and then “and x more” (select2)
  • select2 4.0 - TypeError: $(…).select2(…).select2(…) is undefined
  • How do I get a select2 control to center itself?
  • Aurelia trying to load HTML from Select2?
2
  • 6
    muchachos, tampoco es para fulminarlo a negativos, podemos tomarnos la molestia de editarlo para que no halla problemas.
    – SalahAdDin
    Commented el 7 dic. 2015 a las 8:27
  • 1
    Una gran opción acceder directamente al objeto en lugar de un valor simple, pero al igual que la respuesta anterior en el ejemplo de plunkr que nos regalas no se ve reflejada la solución de two-way binding, sería genial si nos pudieras regalar un ejemplo de este tipo entre dos Select2. Commented el 9 dic. 2015 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.