use a method that fires on init to change setup between block form (l…

…abel element wrapping input and content) and non-block form (solo input element)

README.md

@@ -23,12 +23,12 @@ Handlebars:
     groupValue=color
     changed="colorChanged"}}
 
-{{#labeled-radio-button
+{{#radio-button
     value="blue"
     groupValue=color
     changed="colorChanged"}}
     Blue
-{{/labeled-radio-button}}
+{{/radio-button}}
 ```
 
 Results in:

addon/components/labeled-radio-button.js

@@ -4,7 +4,7 @@ export default Ember.Component.extend({
   tagName: 'label',
 
   actions: {
-    changed: function(value) {
+    innerRadioChanged: function(value) {
       this.sendAction('changed', value);
     }
   }

addon/components/radio-button.js

@@ -5,8 +5,19 @@ import RadioButtonBase
 var computed = Ember.computed;
 
 export default RadioButtonBase.extend({
+  value: null,
   groupValue: null,
 
+  wrapInLabelIfUsedAsBlock: function() {
+    if (this.get('template')) {
+      this.set('tagName', 'label');
+      this.set('layoutName', 'components/labeled-radio-button');
+
+      // our change event handler becomes unused
+      this.set('change', undefined);
+    }
+  }.on('init'),
+
   checked: computed('groupValue', 'value', function(){
     return this.get('groupValue') === this.get('value');
   }).readOnly(),
@@ -23,6 +34,14 @@ export default RadioButtonBase.extend({
 
   sendChangedAction: function() {
     this.sendAction('changed', this.get('value'));
+  },
+
+  actions: {
+    // when used as a block, our layout wraps a non-block
+    // radio-button which maps changed to this
+    innerRadioChanged: function(value) {
+      this.sendAction('changed', value);
+    }
   }
 });
 

app/templates/components/labeled-radio-button.hbs

@@ -1,5 +1,5 @@
 {{radio-button
-    changed="changed"
+    changed="innerRadioChanged"
     disabled=disabled
     groupValue=groupValue
     name=name

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-radio-button",
-  "version": "1.0.0",
+  "version": "0.3.0",
   "directories": {
     "doc": "doc",
     "test": "tests"

tests/dummy/app/templates/index.hbs

@@ -1,86 +1,86 @@
 <p style="background-color: #F7F7F7;padding: 15px 20px;">
   <code>
-    \{{#labeled-radio-button value="green" groupValue=color changed="colorChanged"}}<br>
+    \{{#radio-button value="green" groupValue=color changed="colorChanged"}}<br>
       &nbsp;&nbsp;Green<br>
-    \{{/labeled-radio-button}}<br>
-    \{{#labeled-radio-button value="blue" groupValue=color changed="colorChanged"}}<br>
+    \{{/radio-button}}<br>
+    \{{#radio-button value="blue" groupValue=color changed="colorChanged"}}<br>
       &nbsp;&nbsp;Blue<br>
-    \{{/labeled-radio-button}}<br>
+    \{{/radio-button}}<br>
   </code>
 </p>
 <strong>Selected Color:</strong> {{color}}
 <p>
-  {{#labeled-radio-button tagName="label" value="green" groupValue=color changed="colorChanged"}}
+  {{#radio-button tagName="label" value="green" groupValue=color changed="colorChanged"}}
     Green
-  {{/labeled-radio-button}}
-  {{#labeled-radio-button tagName="label" value="blue" groupValue=color changed="colorChanged"}}
+  {{/radio-button}}
+  {{#radio-button tagName="label" value="blue" groupValue=color changed="colorChanged"}}
     Blue
-  {{/labeled-radio-button}}
+  {{/radio-button}}
 </p>
 
 <h3>Disabled flag</h3>
 <p style="background-color: #F7F7F7;padding: 15px 20px;">
   <code>
-    \{{#labeled-radio-button value=true groupValue=numbersDisabled}}<br>
+    \{{#radio-button value=true groupValue=numbersDisabled}}<br>
       &nbsp;&nbsp;Disabled<br>
-    \{{/labeled-radio-button}}<br>
-    \{{#labeled-radio-button value=false groupValue=numbersDisabled}}<br>
+    \{{/radio-button}}<br>
+    \{{#radio-button value=false groupValue=numbersDisabled}}<br>
       &nbsp;&nbsp;Enabled<br>
-    \{{/labeled-radio-button}}<br>
+    \{{/radio-button}}<br>
 
-    \{{#labeled-radio-button value="one" groupValue=number disabled=numbersDisabled}}<br>
+    \{{#radio-button value="one" groupValue=number disabled=numbersDisabled}}<br>
       &nbsp;&nbsp;One<br>
-    \{{/labeled-radio-button}}<br>
-    \{{#labeled-radio-button value="two" groupValue=number disabled=numbersDisabled}}<br>
+    \{{/radio-button}}<br>
+    \{{#radio-button value="two" groupValue=number disabled=numbersDisabled}}<br>
       &nbsp;&nbsp;Two<br>
-    \{{/labeled-radio-button}}<br>
-    \{{#labeled-radio-button value="three" groupValue=number disabled=numbersDisabled}}<br>
+    \{{/radio-button}}<br>
+    \{{#radio-button value="three" groupValue=number disabled=numbersDisabled}}<br>
       &nbsp;&nbsp;Three<br>
-    \{{/labeled-radio-button}}<br>
+    \{{/radio-button}}<br>
   </code>
 </p>
 <strong>Numbers Disabled:</strong> {{numbersDisabled}}
 <strong>Number:</strong> {{number}}
 <p>
-  {{#labeled-radio-button value=true groupValue=numbersDisabled}}
+  {{#radio-button value=true groupValue=numbersDisabled}}
     Disabled
-  {{/labeled-radio-button}}
-  {{#labeled-radio-button value=false groupValue=numbersDisabled}}
+  {{/radio-button}}
+  {{#radio-button value=false groupValue=numbersDisabled}}
     Enabled
-  {{/labeled-radio-button}}
+  {{/radio-button}}
 </p>
 <p>
-  {{#labeled-radio-button value="one" groupValue=number disabled=numbersDisabled}}
+  {{#radio-button value="one" groupValue=number disabled=numbersDisabled}}
     One
-  {{/labeled-radio-button}}
-  {{#labeled-radio-button value="two" groupValue=number disabled=numbersDisabled}}
+  {{/radio-button}}
+  {{#radio-button value="two" groupValue=number disabled=numbersDisabled}}
     Two
-  {{/labeled-radio-button}}
-  {{#labeled-radio-button value="three" groupValue=number disabled=numbersDisabled}}
+  {{/radio-button}}
+  {{#radio-button value="three" groupValue=number disabled=numbersDisabled}}
     Three
-  {{/labeled-radio-button}}
+  {{/radio-button}}
 </p>
 
 <h3>Required</h3>
 <p style="background-color: #F7F7F7;padding: 15px 20px;">
   <code>
-    \{{#labeled-radio-button value=true groupValue=noDefault name="no-default" required=true}}<br>
+    \{{#radio-button value=true groupValue=noDefault name="no-default" required=true}}<br>
       &nbsp;&nbsp;Disabled<br>
-    \{{/labeled-radio-button}}<br>
-    \{{#labeled-radio-button value=false groupValue=noDefault name="no-default"}}<br>
+    \{{/radio-button}}<br>
+    \{{#radio-button value=false groupValue=noDefault name="no-default"}}<br>
       &nbsp;&nbsp;Enabled<br>
-    \{{/labeled-radio-button}}
+    \{{/radio-button}}
   </code>
 </p>
 <strong>No Default:</strong> {{noDefault}}
 <p>
   <form>
-    {{#labeled-radio-button value=fale groupValue=noDefault name="no-default" required=true}}
+    {{#radio-button value=false groupValue=noDefault name="no-default" required=true}}
       Disabled
-    {{/labeled-radio-button}}
-    {{#labeled-radio-button value=true groupValue=noDefault name="no-default"}}
+    {{/radio-button}}
+    {{#radio-button value=true groupValue=noDefault name="no-default"}}
       Enabled
-    {{/labeled-radio-button}}<br>
+    {{/radio-button}}<br>
     <button type="submit">Submit</button>
   </form>
 </p>

tests/unit/components/radio-button-test.js

@@ -6,7 +6,9 @@ import {
 
 var run = Ember.run;
 
-moduleForComponent('radio-button', 'RadioButtonComponent', {});
+moduleForComponent('radio-button', 'RadioButtonComponent', {
+  needs: ['template:components/labeled-radio-button']
+});
 
 test('it renders', function() {
   expect(2);
@@ -111,3 +113,15 @@ test('updates disabled when the disabled attribute changes', function() {
   });
   ok(component.$().is(':not(:disabled)'));
 });
+
+test('uses a layout, tagName=label, when given a template', function() {
+  var component = this.subject({
+    template: function() { return 'Red'; }
+  });
+
+  this.append();
+  ok(component.$().is('label'));
+  ok(component.$().is('label:contains(Red)'));
+
+  equal(component.$('input[type=radio]').length, 1);
+});