johanobergman · September 29, 2015 22:37 · Oct 11, 2014 · Oct 11, 2014 · Oct 11, 2014 · Oct 11, 2014
diff --git a/4. section-helpers.js b/4. section-helpers.js
@@ -7,8 +7,8 @@ section = function(name, options) {
 
 yieldSection = function(name, options) {
   var context, section;
-  if ((context = this.get('parent')) && (section = context.get(name + "Section"))) {
-    section(context);
+  if ((context = this.get('parent')) && (sectionBlock = context.get(name + "Section"))) {
+    sectionBlock(context);
   }
 };
 

diff --git a/1. Description.txt → 1. description.txt b/1. Description.txt → 1. description.txt
diff --git a/index.hbs → 2. index.hbs b/index.hbs → 2. index.hbs
diff --git a/my-component.hbs → 3. my-component.hbs b/my-component.hbs → 3. my-component.hbs
diff --git a/section-helpers.js → 4. section-helpers.js b/section-helpers.js → 4. section-helpers.js
diff --git a/~app.js → 5. app.js b/~app.js → 5. app.js
diff --git a/Description.txt → 1. Description.txt b/Description.txt → 1. Description.txt
diff --git a/description.txt → Description.txt b/description.txt → Description.txt
diff --git a/my-component.hbs b/my-component.hbs
@@ -13,5 +13,5 @@
   {{else}}
     <p>Just some generic content in case nothing else was specified.</p>
   {{/if}}
-	
+  
 </div>
diff --git a/app.js → ~app.js b/app.js → ~app.js
diff --git a/app.js b/app.js
@@ -0,0 +1,4 @@
+import { section, yieldSection } from 'app-name/helpers/section-helpers';
+
+Ember.Handlebars.registerHelper('section', section);
+Ember.Handlebars.registerHelper('yield-section', yieldSection);
diff --git a/description.txt b/description.txt
@@ -1,3 +1,3 @@
 Simply register the two helpers "section" and "yield-section", and start right away!
 
-See example below:
+See example below, using ember-cli:
diff --git a/section-helpers.js b/section-helpers.js
@@ -0,0 +1,15 @@
+import Ember from 'ember';
+var section, yieldSection;
+
+section = function(name, options) {
+  this.set(name + "Section", options.fn);
+};
+
+yieldSection = function(name, options) {
+  var context, section;
+  if ((context = this.get('parent')) && (section = context.get(name + "Section"))) {
+    section(context);
+  }
+};
+
+export { section, yieldSection };
diff --git a/my-component.hbs b/my-component.hbs
@@ -8,8 +8,8 @@
 
   {{#if parent.footerSection}}
     <div class="component-footer">
-  	  {{yield-section 'footer'}}
-  	</div>
+      {{yield-section 'footer'}}
+    </div>
   {{else}}
     <p>Just some generic content in case nothing else was specified.</p>
   {{/if}}

diff --git a/my-component.hbs b/my-component.hbs
@@ -11,7 +11,7 @@
   	  {{yield-section 'footer'}}
   	</div>
   {{else}}
-  	<p>Just some generic content in case nothing else was specified.</p>
+    <p>Just some generic content in case nothing else was specified.</p>
   {{/if}}
 
 </div>
diff --git a/my-component.hbs b/my-component.hbs
@@ -6,12 +6,12 @@
 
   {{yield}}
 
-	{{#if parent.footerSection}}
-	  <div class="component-footer">
-		  {{yield-section 'footer'}}
-		</div>
-	{{else}}
-		<p>Just some generic content in case nothing else was specified.</p>
-	{{/if}}
+  {{#if parent.footerSection}}
+    <div class="component-footer">
+  	  {{yield-section 'footer'}}
+  	</div>
+  {{else}}
+  	<p>Just some generic content in case nothing else was specified.</p>
+  {{/if}}
 
 </div>
diff --git a/description.md → description.txt b/description.md → description.txt
diff --git a/description.md b/description.md
@@ -0,0 +1,3 @@
+Simply register the two helpers "section" and "yield-section", and start right away!
+
+See example below:
diff --git a/index.hbs b/index.hbs
@@ -1,6 +1,6 @@
 <h1>Hello from the index page!</h1>
 
-{{#my-component parent=controller}}
+{{#my-component parent=this}}
 
   {{#section 'header'}}
     <h2>Header inside my awesome component.</h2>
@@ -12,7 +12,7 @@
   <p>
 
   {{#section 'footer'}}
-    <p>Copyright FooCompany
+    <p>Show me in the footer, please.<p>
   {{/section}}
 
 {{/my-component}}
diff --git a/my-component.hbs b/my-component.hbs
@@ -1,3 +1,17 @@
 <div class="my-component">
-
+
+  <div class="component-header">
+    {{yield-section 'header'}}
+  </div>
+
+  {{yield}}
+
+	{{#if parent.footerSection}}
+	  <div class="component-footer">
+		  {{yield-section 'footer'}}
+		</div>
+	{{else}}
+		<p>Just some generic content in case nothing else was specified.</p>
+	{{/if}}
+
 </div>
diff --git a/my-component.hbs b/my-component.hbs
@@ -0,0 +1,3 @@
+<div class="my-component">
+
+</div>
diff --git a/index.hbs b/index.hbs
@@ -0,0 +1,18 @@
+<h1>Hello from the index page!</h1>
+
+{{#my-component parent=controller}}
+
+  {{#section 'header'}}
+    <h2>Header inside my awesome component.</h2>
+  {{/section}}
+
+  <p>
+    Here goes the main body that fits into the standard "yield" helper.
+    That's because I'm not in a section.
+  <p>
+
+  {{#section 'footer'}}
+    <p>Copyright FooCompany
+  {{/section}}
+
+{{/my-component}}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Simply register the two helpers "section" and "yield-section", and start right away!

		See example below:
No results found