Aurelia: Model.bind vs value.bind

By December 16, 2017Uncategorized

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.

Okay example time — if this is the set of option choices:
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

Leave a Reply