two-way bind with Select2 in aurelia.io

Why is the value in the view-model not updated? This library has certain similarities to other libraries that are also used bindin models, for example, Backbone. Both Backbone and Aurelia "recognize" when a value change has been made in any of their attributes since they subscribe to events such as "input" or "change" depending on the type of html element, and therefore, it is there where sync the changes with the view. In your case, that's the only detail missing. But before getting into the solution, we must know some important details of the select2 library that affect the functioning of the Aurelia binding.

Drawbacks of select2 .

As you have stated, the select2 library prepends a series of html elements that are intended to render their own design. Despite this, select2 manages to display the value of the original element <select>and this can be confirmed on form submission. However, you lose an important factor by prepending this design, and that is that the events of clickand changeare no longer fired on the original element. What does this mean? Here is an example:

<select name='capital' id="capital">
  <option value="Santiago">Chile</option>
  <option value="San José">Costa Rica</option>
  <option value="Kingston">Jamaica</option>
</select>

Let's add the ordinary listenerevent :change

var elemento = document.getElementById("capital");
elemento.addEventListener("change", mostrarCapital);

function mostrarCapital(){
  console.log(elemento.value);
}

By executing the previous code in the browser, we can confirm that every time an option is selected, it shows us the new select value on the console. Ok, now we add to the select2 library:

var elemento = document.getElementById("capital");
elemento.addEventListener("change", mostrarCapital);

function mostrarCapital(){
  console.log(elemento.value);
}

// iniciar select2
$('#capital').select2();

Goodbye events! Every time we select an option, nothing happens. It no longer shows the selected value in the console. That's because select2 doesn't dispatch such events on the original element.

You can check this example online from http://jsfiddle.net/manix/zax7f1vk/

Why is the original bind of the <select>?

It doesn't really get lost, and as said above, select2 is just another component referenced by the initial value of the <select>. So, every time we load the page, what is produced is a one-waybind, since in effect, select2 recognizes the initial value according to the model's bind, but a flow will never be produced view > view-model, because the change events are never dispatched, and therefore, Aurelia never notices the new value of the <select>.

Finally the solution

There are two missing puzzle pieces for (1) two-way sync two-wayand (2) without losing select2 functionality:

1. Dispatch the event changeprogrammed on the element <select>in question so that Aurelia does the rest. We do that with clase.lanzarEvento(e.target):

   attached() {
       var clase = this;
       $("select").on("select2:select", function(e) {
          clase.lanzarEvento(e.target);
       });
       $("select").select2();
   }
   

   With the line clase.lanzarEvento(e.target);we are manually triggering a "change" event on the <select>original. The following code contains the event definition:

   lanzarEvento(elemento) {
       // creamos el evento de cambio
       var eventoDeCambio = document.createEvent('Event');
       eventoDeCambio.initEvent('change', true, true);
   
       // despachar el evento
       elemento.dispatchEvent(eventoDeCambio);
   }
   

   At this point, Aurelia has been notified and thus will end up complementing the bind with a stream view > view-modelas it will extract the value found in the element and update it to the model.

   You can see this behavior in the online example posted at http://plnkr.co/edit/qJOPr6?p=preview .

2. You will notice that in the example above, clicking on the "Select Nissan" button does not update the select2 component. This is because, as we know, it is a component that does not have any bind, since the bind is directly associated with it (as it should be). So how do we solve it? Unfortunately the tool plnkr.codoes not allow me to push beyond the used demo, because it does not have the module enabled ObserverLocatorthat solves this issue. With this module we can know when a change has been made on a certain attribute. In other words, the flow would be as follows:

   - Observando cambios sobre "auto"..
   - ¿se ha encontrado un nuevo valor?
   * si: actualizar el componente select2 (a nivel de interfaz)
   * no: flujo normal
   

   However, here I leave the reference code, at least the specific changes on what I just mentioned:

   // 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");
     }
   

   You can see the complete source code at http://plnkr.co/edit/AZFXwo

conclusion

I know the answer is very broad, but there were details I didn't want to gloss over, especially since I wanted to illustrate how and when a bind one-wayand occurred two-way.

Bind an object to a Select2 option?

I have a Select2 form like this:

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

With which I can access selectedStuff, which is an array of the ids of the things I've selected. However, I would like to get an array of those things and not their ids. In my use case, it is not feasible to fetch something from its id.

Is there a way to force the element object to give me an array of the things I need instead of an array of their ids?

Response:

The element attribute value <option>only accepts strings. Use the attribute model to store the non-string elements:

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

Here is a working plunker :

Here is the related documentation on aurelia:

Related questions:

• 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?