JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script type="text/x-handlebars">
{{#view Ember.RadioButtonGroup valueBinding="App.object.property"
name="test-radio-group"}}
<label>{{view view.RadioButton value="option1"}}option 1</label>
<label>{{view view.RadioButton value="option2"}}option 2</label>
<label>{{view view.RadioButton value="option3"}}option 3</label>
{{/view}}
</script>
JavaScript
var get = Ember.get, set = Ember.set;
Ember.RadioButton = Ember.View.extend({
attributeBindings: ["isDisabled:disabled", "type", "name", "value"],
classNames: ["ember-radio-button"],
value: null,
selectedValue: null,
isDisabled: false,
isChecked: false,
tagName: "input",
type: "radio",
didInsertElement: function() {
Ember.addObserver(this, 'isChecked', this, this.isCheckedDidChange);
this.isCheckedDidChange();
},
willInsertElement: function() {
Ember.removeObserver(this, 'isChecked', this, this.isCheckedDidChange);
},
selectedValueDidChange: Ember.observer(function() {
set(this, 'isChecked', get(this, 'value') === get(this, 'selectedValue'));
}, 'selectedValue'),
isCheckedDidChange: function() {
var isChecked = get(this, 'isChecked');
this.$().prop('checked', isChecked ? 'checked' : null);
if (isChecked) {
set(this, 'selectedValue', get(this, 'value'));
}
},
init: function() {
this._super();
this.selectedValueDidChange();
},
click: function() {
Ember.run.once(this, this._updateElementValue);
},
_updateElementValue: function() {
set(this, 'isChecked', this.$().prop('checked'));
}
});
Ember.RadioButtonGroup = Ember.View.extend({
classNames: ['ember-radio-button-group'],
attributeBindings: ['name:data-name'],
name: Ember.required(),
value: null,
RadioButton: Ember.computed(function() {
return Ember.RadioButton.extend({
group: this,
selectedValueBinding: 'group.value',
nameBinding: 'group.name'
});
})
});
App = Ember.Application.create();
App.object = Ember.Object.create({
property: 'option1',
propertyDidChange: Ember.observer(function() {
console.log('property', get(this, 'property'));
console.log(jQuery('input[type="radio"]:checked').length);
}, 'property')
});
// Change selection an then try update it through binding
// App.object.set('property', 'option1');