Just wanted to quickly post about this because generally I only care about value.binding for form submissions.
However, I just realized now what the model bind is good for (show’s how often I have used it!). It will bind the whole array entry to the form-item selected.
constructor(){ this.options= [ {id:1, text:'Option 1'}, {id:2, text:'Option 2'}, {id:3, text:'Option 3'} ]; this.selectedOption=this.options[0]; }
And the code [with a little bootstrap formatting] (in page.html, etc):
<div class="form-group"> <div repeat.for="option of option"class="radio"> <label> <input type="radio" name="periodOptions" model.bind="option" checked.bind="$parent.selectedOption"/> ${option.text} </label> </div> </div>
Visually here’s what that looks like (code for dumping the “selectedOption” is show in the GIST below.
A running simplified GIST of this (by the almighty Aurelia developer Jeremy Danyow) at:
https://gist.run/?id=84eb0949ff63c3f10a1eff3c337f2c97
I really like the power of the select2 element, and needed to use it in an aurelia project.
There are a few aurelia custom elements out there, but of those I saw, none gave a very simple, lightweight wrapper that would allow me to use HTML within the multi-select.
This attached code does, just include these bundles:
jspm install jquery
jspm install select2
jspm install bootstrap
jspm install npm:select2-bootstrap-theme
Inside your controller, there are 2 variables you need: the “selected” array and the options listing.
The options listing has 3 keys: “value” (the option value), “label” (the text-label), and “label_full” (the html label, if this not included, it uses the text label).
For example in mycontroller.js:
this.selectedArray = [];
this.optionsArray = [
{label: “Option 1”, label_full: “<i class=’glyph-icon icon-book’></i> Option 1”, value: 10},
{label: “Option 2”, label_full: “<i class=’glyph-icon icon-coffee’></i> Option 2”, value: 20} ];
Now in your aurelia template include the custom element:
And add the tags where you are using them:

Welcome, and thank you for coming.
In the last few years I’ve been hyper-involved with a plethora of technologies at some start-up companies. It’s been challenging and fun but at the same time stressful. My developers seemed to do things in a way that was not flexible to change, nor optimized for the situation.
Maybe I had the wrong people, but maybe I had to learn something.
So I started to re-learned all the latest client-side frameworks, and wow have solutions matured in a way that makes it much easier to package clean solutions.
But there’s one problem. There are too MANY javascript/client-side frameworks out there.
Our adventure into this over the next while is to first build a service that scans the whole web to find what frameworks are being used … from this I can at least figure out and suggest what is really worth knowing. Part of this challenge is going through the effort of an idea and boiling it down into a full-scale web solution. And I’ll share a good chunk of the code with you on github.
And after that it will be a top-down analysis of what the frameworks really have to offer and how future-proof they are.
We are going to be discussing the big guys in detail – Angular, Angular2, Angular4, React, Vue-JS, and Aurelia (not as popular, but a nicely done framework that is fairly clean ECMAScript 6 without boilerplate code).