Using Radio Buttons in EmberJS
Based on Ember.RadioButton, this updated view also updates radio buttons (with JQuery) if the model changes outside of clicking the buttons themselves with updateChecked()
:
App.RadioButton = Ember.View.extend
tagName: "input"
type: "radio"
attributeBindings: [
"name"
"type"
"value"
"checked:checked:"
]
click: ->
@set "selection", @$().val()
return
checked: (->
typeof @get('selection') != 'undefined' && @get("value").toString() == @get("selection").toString()
).property()
updateChecked: (->
@$().prop('checked', @get("selection") == @get("value"))
).observes('selection')
These views can then be used as normal views:
<label>{{view App.RadioButton name="myRadio" selectionBinding="sortOrder" value="one"}} Option one</label>
<label>{{view App.RadioButton name="myRadio" selectionBinding="sortOrder" value="two"}} Option two</label>
<label>{{view App.RadioButton name="myRadio" selectionBinding="sortOrder" value="three"}} Option three</label>