Ember wrapper for radio button group

radio-button-group.js

UiControls = window.UiControls || Ember.Namespace.create();

/**
 * An Ember RadioButton Group Control
 *
 * @example
 *   {{#view UiControls.RadioButtonGroup group="segment-option" valueBinding="sendingPreference"}}
 *     {{view UiControls.RadioButton title="Title 1" value="1"}}
 *     {{view UiControls.RadioButton title="Title 2" value="2"}}
 *   {{/view}}
 *
 * @class
 * @memberOf UiControls
 * @extends Ember.View
 */
UiControls.RadioButtonGroup = Ember.View.extend({
  classNames: ['ember-radio-button-group'],

  group: 'uicontrols-radio-button-group',

  /**
   * Current checked value
   * of the radio button group
   * @type {String}
   */
  value: null
});

UiControls.RadioButton = Ember.View.extend({
  title: null,

  checked: function () {
    return this.get('parentView.value') === this.get('value');
  }.property('parentView.value').volatile(),

  groupBinding: 'parentView.group',

  disabled: false,

  value: null,

  classNames: ['vwo-radio-button'],

  template: Ember.Handlebars.compile('<label><input type="radio" {{bindAttr disabled="view.disabled" name="view.group" value="view.value" checked="view.checked"}} />{{view.title}}</label>'),

  click: function () {
    this.set('parentView.value', this.get('value'));
  }
});