HBS Component.md

Block helper for hbs.

First argument should match the filename of the component (e.g. modal). Anything passed to the component as an attribute will be added to the args object. Content can include any HTML/CSS/JS and even other parials.

Note: Uncomment 'data' in the helper to get access to locals within the component. Otherwise pass any locals to the component as attributes.

hbsHelpers.js

hbs.registerHelper('component', function(component, options) {
	var componentPath = __dirname + '/views/partials/blocks/'+ component +'.html'
		, template = hbs.compile(fs.readFileSync(componentPath, 'utf8'))
		, content = new hbs.handlebars.SafeString(options.fn(this))

	return new hbs.handlebars.SafeString(template({
		content: content
		, args: options.hash
		// , data: options.data.root
	}))
})

layout.html

{{#component 'modal' title='Login'}}
	<!-- Any content, even other partials -->
	{{>loginForm }}
{{/component}}

modal.html

<div class="modal modal--active">
	<div class="modal__center">
		<div class="modal__header">{{args.title}}</div>
		<div class="modal__content">
			{{ content }}
		</div>
	</div>
</div>