Bind object to Select2 option?

Question

So I have a Select2 form:

<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 that are selected. However, I would like instead to get an array of the things themselves rather than their ids. In my use case, it is not viable to look up a thing from an id. Is there any way to bind the thing object to the <option> element so that I can get the array of selected things rather than an array of selected thing.ids?

Answer 1

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

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

Here's a working plunker:

http://plnkr.co/edit/mEpr8E?p=preview

Here's the documentation on select binding with aurelia: http://aurelia.io/docs.html#select-elements