edit this page - page history - about editing

Using Radio Buttons in EmberJS

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>

Categories: EmberJS | Javascript
edit this page - what links to here? - page history - top
Last edited by jevon jevon 36 months ago