aurelia - binding values to radio buttons

Question

I'm trying to bind the radio buttons 'checked' status to the boolean values in my JSON object, but it's not being set.

template: (jobReadinessItems is an array of "Items")

<tbody>
  <tr repeat.for="item of jobReadinessItems">
    <td><input id="have" name="readiness" type="radio" checked.bind="item.Have" /></td>
    <td><input id="need" name="readiness" type="radio" checked.bind="item.Need" /></td>
</tr>

Item (json):

{     
  Have: false,
  Need: true
 }

cs

  public class JobReadinessItemDto
  {

     public bool Have { get; set; }
     public bool Need { get; set; }

   }

However, if I bind it this way it shows the values (but of course I can't set it):

 checked.bind="item.Have ? 'on' :  'off'"

Why does it display properly for "on/off" but not true/false?

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

Answer 1

Have a look at the cheat-sheet in the Aurelia docs.

Search for "radio" and you'll find a few examples that might be a helpful reference. One thing jumps out at me right away though:

<tr repeat.for="item of jobReadinessItems">

This should iterate over an array, but jobReadinessItems is an object:

{     
  Have: false,
  Need: true
 }

You should either change this to be an array:

[
  {value: 'Have', checked: false},
  {value: 'Need', checked: true}
]

...and bind it accordingly in your template, or change your template to bind to the object values directly. Hope that helps.