Ember.js Button Toggle

by chopper

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">
    <label>
        {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" value="true"}}
        Yes
    </label>
    
    <label>
        {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" value="false"}}
        No
    </label>
    
    <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:" ],
    click : function() {
        this.set("selection", this.$().val())
    },
    checked : function() {
        return this.get("value") == this.get("selection");   
    }.property()
});

App.ApplicationController = Ember.ObjectController.extend({
    isSelected:"false"
});