Simple starting point for Ember.js fiddles

by stephane_klein

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.3.js"></script>
<script type="text/x-handlebars">
    {{view Em.RadioButton title="1" option="1" group="default" valueBinding="App.radio1"}}
    {{view Em.RadioButton title="Ohai" option="Words" group="default" valueBinding="App.radio1"}}
    {{view Em.RadioButton title="3" option="3" group="default" valueBinding="App.radio1"}}
    {{view Em.RadioButton title="Dog" option="Dog" group="default" valueBinding="App.radio1"}}
    {{view Ember.TextField valueBinding="App.radio1"}}
</script>

JavaScript

(function(exports) {
var set = Ember.set, get = Ember.get;
Ember.RadioButton = Ember.View.extend({
  title: null,
  checked: false,
  group: "radio_button",
  disabled: false,

  classNames: ['ember-radio-button'],

  defaultTemplate: Ember.Handlebars.compile('<label><input type="radio" {{ bindAttr disabled="disabled" name="group" value="option" checked="checked"}} />{{title}}</label>'),

  bindingChanged: function(){
   if(this.get("option") == get(this, 'value')){
       this.set("checked", true);
    }
  }.observes("value"),
    
  change: function() {
    Ember.run.once(this, this._updateElementValue);
  },

  _updateElementValue: function() {
    var input = this.$('input:radio');
    set(this, 'value', input.attr('value'));
  }
});

})({});

App = Ember.Application.create({
    radio1: ""
});