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">
<table border="1">
{{#each content}}
<tr><td>{{name}} {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" valueBinding="name"}}</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",
arrBinding: 'App.ApplicationController.content',
attributeBindings: ["name", "type", "value", "checked:checked:"],
click: function () {
this.set("selection", this.$().val())
alert(this.$().val());
alert(arrBinding);
},
checked: function () {
return this.get("value") == this.get("selection");
}.property()
});
App.ApplicationController = Ember.ObjectController.extend({
isSelected: 'Ashish',
content:[
{
name: 'Ashish',
selected: false
},
{
name: 'Eben',
selected: false
},
{
name: 'Ronald',
selected: false
},
{
name: 'Jamie',
selected: false
}
]
});