Ember.js Button Toggle

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">
    {{#each letter in letters}}
        <label>
            {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" valueBinding=letter.id}}
            {{letter.id}}
        </label>
    {{/each}}
    
    <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:"a",
    letters: function() {
        var letters = ["a", "b", "c"];

        return letters.map(function(letter) {
            return Ember.Object.create({id: letter});
        });
    }.property()
});