Skip to main content
3 de 7
se añadieron 1053 caracteres en el cuerpo
manix
  • 667
  • 1
  • 5
  • 18

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

  1. Inicializar el elemento select2

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

manix
  • 667
  • 1
  • 5
  • 18