view page source - page history - about editing

Revision History: Using Radio Buttons in EmberJS

This is revision 460 of the page Using Radio Buttons in EmberJS, as it appeared on Sun, 13 Apr 2014 17:23:52 -0700.
EmberJS

Based on Ember.RadioButton, this updated view also updates radio buttons (with JQuery) if the model changes outside of clicking the buttons themselves:

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

view page source - what links to here? - page history - top
Last edited by jevon jevon 54 months ago