Can't set "checked" on a radio input if it contains {{action}}

1

Hi all, I’d like to create a rating system for a group of images. I used the css-only method described in “Designing next generation web projects with CSS3” which uses to check a radio input with MyId id. So the inputs can be hidden while the labels are showed as stars (full or empty depending from the “checked” attribute of the input).

The problem is that everything works fine with this input:

<input type="radio" {{bind-attr name="view.customName" value="view.value" id="view.customUuid"}}>
<label class="stars" {{bind-attr for="view.customUuid"}}>{{view.labelText}}</label>

but if I add an action to the input, the action is correctly called, but the input isn’t checked anymore:

<input type="radio" {{action 'updateSelectedRating' view view.value}} {{bind-attr name="view.customName" value="view.value" id="view.customUuid"}}>

I also tried to add a checked attr which correctly returns true if the input should be checked, but nothing happens:

<input type="radio" {{action 'updateSelectedRating' view view.value}} {{bind-attr name="view.customName" value="view.value" id="view.customUuid" checked="view.isSelected"}}>

I can’t understand if I wrote something really weird (I’m a beginner with Ember) or there is some king of problem with Ember (I bet for the first…).

The reason I used a view is that this is a part of a multifile upload page, so the id of the inputs must be different for every upload and the only way I found was with a view.

The code of the view is:

`import Ember from 'ember'`

RadioButtonView = Ember.View.extend
  tagName : ''
  attributeBindings : [ "name", "value"]
  templateName: 'views/rating-radio-button'

  customUuid : (->
    return "#{@get('uuid')}-#{@get('value')}"
  ).property('uuid', 'value')

  customName : (->
   return "#{@get('uuid')}-#{@get('name')}"
  ).property('uuid', 'name')

`export default RadioButtonView`

The template of the view:

<input type="radio" {{action 'updateSelectedRating' view view.value}} {{bind-attr name="view.customName" value="view.value" id="view.customUuid" checked="view.isSelected"}}>
<label class="stars" {{bind-attr for="view.customUuid"}}>{{view.labelText}}</label>

And this is the action in the controller:

  actions:
      updateSelectedRating: (value) ->
        @get('model').rating = value

Note that the value of the input is correctly set in the model, so it’s only a problem of setting the input as checked.

I also tried using jquery inside the controller or the view, but it doesn’t work:

Ember.$(inputId).prop("checked", true)

The same command, from the console of the browser, works great…

Thank you!