Bind object to Select2 option?

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

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