Added ability to pass arbitrary values into extend and embed via attributes. Resolves #14.

shannonmoeller · shannonmoeller · commit 7cdf8e0f7b70 · 2015-01-24T14:48:45.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 coverage/
 docs/
 node_modules/
+test/actual/
 
 *.log
 .*.swp
diff --git a/README.md b/README.md
@@ -16,14 +16,15 @@ With [Bower](http://bower.io):
 
 ## Helpers
 
-### `{{#extend [partial]}}`
+### `{{#extend [partial] [key=value ...]}}`
 
 - `partial` `String` - Name of partial to render.
+- `attributes` `Object` _(Optional)_ - Arbitrary values that will be added to the context passed to the partial.
 
 Loads a layout partial of a given name and defines block content.
 
-```html
-{{#extend "layout"}}
+```handlebars
+{{#extend "layout" keywords="handlebars,hbs,layout"}}
     {{#content "title" mode="prepend"}}Example - {{/content}}
 {{/extend}}
 ```
@@ -38,13 +39,14 @@ class Page extends Layout {
 }
 ```
 
-### `{{#embed [partial]}}`
+### `{{#embed [partial] [key=value ...]}}`
 
 - `partial` `String` - Name of partial to render.
+- `attributes` `Object` _(Optional)_ - Arbitrary values that will be added to the context passed to the partial.
 
 Allows you to load a partial which itself extends from a layout. Blocks defined in embedded partials will not conflict with those in the primary layout.
 
-```html
+```handlebars
 {{#extend "layout"}}
 
     {{#content "body"}}
@@ -55,7 +57,7 @@ Allows you to load a partial which itself extends from a layout. Blocks defined
             {{/content}}
         {{/embed}}
 
-        {{#embed "modal"}}
+        {{#embed "modal" foo="bar" name=user.fullName}}
             {{#content "title" mode="prepend"}}Image 1 - {{/content}}
             {{#content "body"}}<img src="1.png" alt="" />{{/content}}
         {{/embed}}
@@ -71,11 +73,11 @@ class Page extends Layout {
     body() {
         var gallery = new Gallery();
         gallery.replaceBody('<img src="1.png" alt="" />\n<img src="2.png" alt="" />');
-        
+
         var modal = new Modal();
         modal.prependTitle('Image 1 - ');
         modal.replaceBody('<img src="1.png" alt="" />');
-        
+
         return gallery.toString() + modal.toString();
     }
 }
@@ -87,7 +89,7 @@ class Page extends Layout {
 
 Defines a named block, with optional default content. Blocks may have content appended, prepended, or replaced entirely when extending or embedding. You may append and prepend to the same block multiple times.
 
-```html
+```handlebars
 {{#block "header"}}
     <h1>Hello World</h1>
 {{/block}}
@@ -101,6 +103,13 @@ Defines a named block, with optional default content. Blocks may have content ap
 {{/block}}
 ```
 
+Default block content is optional, and may be omitted.
+
+```handlebars
+<h1>{{{block "title"}}}</h1>
+<p>{{{block "description"}}}</p>
+```
+
 ### `{{#content [name] mode="(append|prepend|replace)"}}`
 
 - `name` `String` - Identifier of the block to modify.
@@ -110,7 +119,7 @@ Sets block content, optionally appending or prepending using the `mode` attribut
 
 Layout:
 
-```html
+```handlebars
 <html>
     ...
     <body>
@@ -131,7 +140,7 @@ Layout:
 
 Page:
 
-```html
+```handlebars
 {{#extend "layout"}}
 
     {{#content "header"}}
@@ -151,7 +160,7 @@ Page:
 
 Output:
 
-```html
+```handlebars
 <html>
     ...
     <body>
@@ -166,6 +175,12 @@ Output:
 </html>
 ```
 
+Content is optional, and may be omitted. This will cause the `main` block to be replaced with an empty string, clearing out any default content.
+
+```handlebars
+{{{content "main"}}}
+```
+
 ## Api
 
 Helpers are registered by passing in your instance of Handlebars. This allows
@@ -209,7 +224,7 @@ grunt.initConfig({
 
 ### Layout Partial
 
-```html
+```handlebars
 <!doctype html>
 <html lang="en-us">
 <head>
@@ -249,7 +264,7 @@ grunt.initConfig({
 
 ### Template
 
-```html
+```handlebars
 {{#extend "layout"}}
     {{#content "head" mode="append"}}
         <link rel="stylesheet" href="assets/css/home.css" />
@@ -301,7 +316,7 @@ console.log(output);
 
 ### Output (prettified for readability)
 
-```html
+```handlebars
 <!doctype html>
 <html lang="en-us">
 <head>
diff --git a/dist/handlebars-layouts.js b/dist/handlebars-layouts.js
@@ -54,6 +54,29 @@ function applyAction(val, action) {
 	}
 }
 
+function mixin(target) {
+	var arg, key,
+		len = arguments.length,
+		i = 1;
+
+	for (; i < len; i++) {
+		arg = arguments[i];
+
+		if (!arg) {
+			continue;
+		}
+
+		for (key in arg) {
+			/* istanbul ignore else */
+			if (arg.hasOwnProperty(key)) {
+				target[key] = arg[key];
+			}
+		}
+	}
+
+	return target;
+}
+
 /**
  * Registers layout helpers on an instance of Handlebars.
  *
@@ -68,6 +91,7 @@ function layouts(handlebars) {
 		 * @param {String} name
 		 * @param {Object} options
 		 * @param {Function(Object)} options.fn
+		 * @param {Object} options.hash
 		 * @return {String} Rendered partial.
 		 */
 		extend: function (name, options) {
@@ -77,6 +101,9 @@ function layouts(handlebars) {
 				context = Object.create(this || {}),
 				template = handlebars.partials[name];
 
+			// Mix attributes into context
+			mixin(context, options.hash);
+
 			// Partial template required
 			if (template == null) {
 				throw new Error('Missing partial: \'' + name + '\'');
diff --git a/index.js b/index.js
@@ -53,6 +53,29 @@ function applyAction(val, action) {
 	}
 }
 
+function mixin(target) {
+	var arg, key,
+		len = arguments.length,
+		i = 1;
+
+	for (; i < len; i++) {
+		arg = arguments[i];
+
+		if (!arg) {
+			continue;
+		}
+
+		for (key in arg) {
+			/* istanbul ignore else */
+			if (arg.hasOwnProperty(key)) {
+				target[key] = arg[key];
+			}
+		}
+	}
+
+	return target;
+}
+
 /**
  * Registers layout helpers on an instance of Handlebars.
  *
@@ -67,6 +90,7 @@ function layouts(handlebars) {
 		 * @param {String} name
 		 * @param {Object} options
 		 * @param {Function(Object)} options.fn
+		 * @param {Object} options.hash
 		 * @return {String} Rendered partial.
 		 */
 		extend: function (name, options) {
@@ -76,6 +100,9 @@ function layouts(handlebars) {
 				context = Object.create(this || {}),
 				template = handlebars.partials[name];
 
+			// Mix attributes into context
+			mixin(context, options.hash);
+
 			// Partial template required
 			if (template == null) {
 				throw new Error('Missing partial: \'' + name + '\'');
diff --git a/test/expected/hash.html b/test/expected/hash.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en-us">
+<head>
+		<title>Users</title>
+
+		<link rel="stylesheet" href="assets/css/screen.css" />
+</head>
+<body>
+	<div class="site">
+		<div class="site-hd" role="banner">
+				<h1>Users</h1>
+		</div>
+
+		<div class="site-bd" role="main">
+<div class="user">
+
+						<p>Monica Curtis</p>
+
+</div>
+<div class="user">
+
+						<p>Sheppard Williams</p>
+
+</div>
+<div class="user">
+
+						<p>Freida Bartlett</p>
+
+</div>
+<div class="user">
+
+						<p>Bette Holden</p>
+
+</div>
+<div class="user">
+		<p>User is active.</p>
+
+						<p>Lora Cote</p>
+
+</div>
+<div class="user">
+		<p>User is active.</p>
+
+						<p>Dickerson Parsons</p>
+
+</div>
+		</div>
+
+		<div class="site-ft" role="contentinfo">
+				<small>&copy; 1984</small>
+		</div>
+	</div>
+
+		<script src="assets/js/controllers/home.js"></script>
+</body>
+</html>
diff --git a/test/fixtures/hash.html b/test/fixtures/hash.html
@@ -0,0 +1,11 @@
+{{#extend "layout"}}
+	{{#content "body"}}
+		{{#each users}}
+			{{#embed "user" showBanner=isActive status="active"}}
+				{{#content "body"}}
+					<p>{{../../name.first}} {{../../name.last}}</p>
+				{{/content}}
+			{{/embed}}
+		{{/each}}
+	{{/content}}
+{{/extend}}
diff --git a/test/fixtures/partials/media.hbs b/test/fixtures/partials/media.hbs
@@ -3,6 +3,6 @@
 		{{#block "image"}}{{/block}}
 	</div>
 	<div class="media-bd">
-		{{#block "body"}}{{/block}}
+		{{{block "body"}}}
 	</div>
 </div>
diff --git a/test/fixtures/partials/user.hbs b/test/fixtures/partials/user.hbs
@@ -0,0 +1,7 @@
+<div class="user">
+	{{#if showBanner}}
+		<p>User is {{status}}.</p>
+	{{/if}}
+
+	{{{block "body"}}}
+</div>
