Ember.js Radio

Table with radio buttons

by EbenRoux

HTML

<script src="http://zphyr.org/test/js/libs/handlebars-1.0.0.js"></script>
<script src="http://zphyr.org/test/js/libs/ember-1.0.0-rc.6.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <table border="1">
      {{#each content}}
        <tr><td>{{name}} {{view Ember.RadioButton name="selectionTest" selectionBinding=this.controller.isSelected valueBinding="__id"}}</td></tr>
        {{/each}}
    </table>
    <div>Is Selected: {{isSelected}}</div>
</script>

JavaScript

console.clear();
window.App = Ember.Application.create({});

Ember.RadioButton = Ember.View.extend({
    tagName: "input",
    type: "radio",
    attributeBindings: ["name", "type", "value", "checked:checked:"],
    init: function(){
        this._super();
        var systemId = Ember.RadioButton.getNextSystemId();
        this.set('context.__systemId', systemId);
        this.set('value', systemId);
    },
    click: function () {
        this.set("selection", this.$().val())
        
        alert(this.$().val()); 
        
        var optionSelection=this.$().val();
        var controller = this.get('controller');
        
        controller.content.forEach(function(item) {
            item.selected = (optionSelection == item.__systemId);
        });

        
        controller.content.forEach(function(item) {
            alert(item.name + ': ' + item.selected);
        });
    },
    checked: function () {
        return this.get("value") == this.get("selection");
        
    }.property()
});

Ember.RadioButton.reopenClass({
    _systemIdCounter: 0,
    
    getNextSystemId: function(){
        var result = this._systemIdCounter + 1;
        
        this._systemIdCounter = result;
        
        return result;
    }
});

App.ApplicationController = Ember.ObjectController.extend({
      isSelected: 'Ashish',
   
    content:[
        {
            name: 'Ashish',
            selected: false
        },
         {
            name: 'Eben',
            selected: false
        },
         {
            name: 'Ronald',
            selected: false
        },
         {
            name: 'Jamie',
            selected: false
        }
    ]
});