[ javascript ] handlebars template

1) browserify ( http://browserify.org/ )

using require() in javascript like in node.js


2) browserify-rails ( https://github.com/browserify-rails/browserify-rails )


class Application < Rails::Application

  // Command line options used when running browserify

  config.browserify_rails.commandline_options = '-t hbsfy'



3) node-hbsfy ( https://github.com/epeli/node-hbsfy )

Handlebars precompiler plugin for Browserify.


register Browserify Helper

var Handlebars = require("hbsfy/runtime");
Handlebars.registerHelper("upcase", function(s, whatever, whatever2, whatever3) {
 return s.toUpperCase();


basic USAGE example


var whateverItIsTemplate = require('../hbs/people.hbs');

$('.test').html(whateverItIsTemplate({x: 1, y: {z: 4}}))


<div>{{ x }}</div>
<div>{{ y.z }}</div>


More handlebarsjs syntax ( http://handlebarsjs.com/ )


{{#each people}}
	<li>{{firstName}} {{lastName}}</li>

Example data :

people: [
 {firstName: "Yehuda", lastName: "Katz"},
 {firstName: "Carl", lastName: "Lerche"},
 {firstName: "Alan", lastName: "Johnson"}



{{#if title}}
<div>Whatever HTML</div>
<div>Whatever another HTML</div>


ref : http://jimfrenette.com/2016/08/handlebars-templates-browserify/



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s