[ 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 )

config/application.rb

class Application < Rails::Application

  // Command line options used when running browserify

  config.browserify_rails.commandline_options = '-t hbsfy'

end

 

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

whatever.js

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

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

hbs/people.hbs

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

 

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

#each

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

Example data :

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

 

#if

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

 

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

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s