Framework: checked.bind cannot be assigned to

[hadrienl]

I'm submitting a bug report

• Library Version:
  1.0.0-rc.1.0.0

Please tell us about your environment:

• Operating System:
  OSX 10.11.5
• Node Version:
  6.2.0
• NPM Version:
  3.8.9
• JSPM OR Webpack AND Version
  JSPM 0.16.39
• Browser:
  Chrome 51
• Language:
  ESNext

Current behavior:
I have radio inputs. I set a checked.bind attribute to be able to check on of theses inputs when attaching the view. Then, I set a click.trigger to be able to fire an action when clicking the input and save the selected one.
When I click an input, I have an error : "aurelia-bundle.js:16958 Uncaught Error: Binding expression "(selected==item)" cannot be assigned to."
I have tried with click.delegate, change.trigger and change.delegate too and the result was the same.

You can try it here: https://gist.run/?id=2ef7f03f7ccd8ea7b21620b63ccf42b2

Expected/desired behavior:

• What is the expected behavior?
  I want to be able to set an initial radio input checked state.

[EisenbergEffect]

@hadrienl Thank you. Sorry if I was a pain. This really helps us.
@jdanyow Can you take a look at this?

[MarioGruda]

There is no problem with Aurelia. You have to bind the value.

<ul>
    <li
      repeat.for="item of items">
      <input
        type="radio"
        name="item"
        value.bind="item"
        checked.bind="selected">
        ${selected == item}
    </li>
  </ul>

  ${selected}

[EisenbergEffect]

@MoiraG Thanks for fielding that question!

[AshleyGrant]

If this isn't already in our docs, we'll need to add it.

[hadrienl]

I think that using checked._bind_ may confuse developers because we have here a different behavior that we should attends. My logic was : I bind the value to the checked attribute and my value will be true or false. But in fact, we set a value to the checked attribute and if this value is same as input value, so, the input will be checked. Maybe another attribute name should be used ?

[jdanyow]

@AshleyGrant it's in the docs- the info should appear the next time the hub is updated.

@hadrienl binding checked to true/false or an array is consistent with the way it works in other frameworks. It's also consistent with the way a checkbox input works without a framework. The value attribute holds the submitted value and the checked attribute holds the state of the checkbox.

[hadrienl]

I agree with you : https://gist.run/?id=181b6a6b8e945a710bf13f46be50006f

But Aurelia does not work like this because checked should have the same value of value attribute to be set as true.

[AshleyGrant]

@hadrienl I'm replying to your comment from #474 here.

The thing is that we have to work within the constraints of a, frankly, less than ideal specification created over 20 years ago. The <input /> element is (and always has been) a mess, and creating an intuitive way to databind to a radio button list is just one example of some of the issues encountered when dealing with <input />.

I encourage you to check out Monica Dinculescu's post on the craziness that is the <input /> element here: http://meowni.ca/posts/a-story-about-input/ She also did a presentation on this topic at Oredev last year: https://vimeo.com/144980655

[hadrienl]

I don't know if I should create another issue so, tell me. I've found another bad behavior about radio.

Check this gist : https://gist.run/?id=cab715d96c8d5ca157919671374189a9

There is two radios, when I click one, I display value and I have a reset button which unselect all radio by setting selected to null. BUT ! remove the display of the selected value (<p>Selected : ${selected}</p>) and reset. The radio will not be unselected. It is unselected only if selected is displayed.

[jdanyow]

@hadrienl here's an updated version of your gist that uses the latest aurelia bits and corrects the template and view-model:

https://gist.run/?id=8e7092c820062c7c4fc71a0b04c087e5

The primary issue is you neglected to define the selected property on your view model.

[hadrienl]

Oh ! Thank you !