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

Question

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.

Can you build a minimal test case using http://emberjs.jsbin.com/ ? — givanse, Dec 05 '14 at 14:12
Note that `{{bind attr checked='someBool'}}` is write only, when the browser changes its state, ember won't be notified. I'm not sure why the action is not bubbling through. Take a look at [this answer](http://stackoverflow.com/questions/18985587/ember-1-0-0-input-type-radio-checked-binding-not-updated-when-property-changes) to be nudged in the right direction. It should solve both of your problems. — Lars, Dec 07 '14 at 13:35
Thanks @user1203738 for the answer, I updated the question with the solution — Tommaso Visconti, Dec 10 '14 at 11:56

score 0 · Answer 1 · answered May 20 '18 at 01:28

Solution by OP.

Thanks to @user1203738 who pointed me to the right direction.

Due to the nature of the view (which contained the radio button and the label) I had to nest two views, where the nested one is a view for the input:

{{view custom-radio-button name=view.customName selectionBinding="view.isSelected" value=view.value id=view.customUuid}}
<label class="stars" {{bind-attr for="view.customUuid"}}>{{view.labelText}}</label>

This is the custom-radio-button:

`import Ember from 'ember'`

CustomRadioButtonView = Ember.View.extend
  tagName : 'input'
  type: "radio"
  attributeBindings : [ "name", "type", "value", "checked:checked:"]

  click : ->
    @set("selection", this.$().val())

  checked : (->
    @get("value") == this.get("selection")
  ).property()

`export default CustomRadioButtonView`

and this is the first view, edited to set the isSelected flag:

`import Ember from 'ember'`

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

  updateIsSelected: (->
    @get('controller').set('selectedRating', @isSelected)
  ).observes('isSelected')

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

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

`export default RadioButtonView`

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

1 Answers1