Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Templater

jamiecopeland edited this page · 4 revisions

Templater

The Wand Templater facilitates nested templating for Handlebars, minimizing markup duplication for both browser and server environments.

Usage

Initialization

The templater accepts both raw strings and precompiled Handlebars templates, which can be either be passed into Template.initialize() or added subsequently using Templater.addRawTemplates(rawTemplateMap) orTemplater.addCompiledTemplates(compiledTemplateMap).

Output

Evaluated output is produced by calling Templater.template('templateName', dataProvider)

Nesting templates

Nested templates are expressed using a Handlebars helper. This is named 'template' by default, but can be changed by passing a handlebarsHelperName option into initialize().

Inner template

<div class="innerTemplate">{{title}}</div>

Outer template

<div class="outerTemplate">
    <div>...</div>
    {{{template "innerTemplateName" this.innerTemplateDataProvider}}}
    <div>...</div>
</div>

Examples

Simple non-nested templating

var Templater = require('wand/lib/templater');

// Templater must be initialized once per application.
// Templates can either be added here or post initialization using addRawTemplates or addCompiledTemplates
Templater.initialize(
  {
    rawTemplates: {
      sectionHeader: '<header style="background-color:#CCC" class="section-header">{{title}}</header>'
    }
  }
);

// Get the output for a simple template
var headerOutput = Templater.template('sectionHeader', { title:'Title text' })
console.log('headerOutput: ', headerOutput);

Nested templating

var Templater = require('wand/lib/templater');

Templater.initialize(
  {
    rawTemplates: {
      sectionHeader: '<header style="background-color:#CCC" class="section-header"><h2 class="upper">{{title}}<h2/><h3 class="upper">{{subTitle}}<h3/></header>',
      userAccount: '<div>{{{template "sectionHeader" this.sectionHeaderData}}}<div>[ Form content here ]</div></div>',
      newsItem: '<div>{{{template "sectionHeader" this.sectionHeaderData}}}<div>{{story}}</div></div>'
    }
  }
);

// Get the output for the nested userAccount template
var userAccountOutput = Templater.template(
  'userAccount',
  {
    sectionHeaderData:{ title:'My Account', subTitle:'Please update your user details' }
  }
);
console.log('userAccountOutput: ', userAccountOutput);


// Get the output for the nested newsItem template
var newsItemOutput = Templater.template(
  'newsItem',
  {
    sectionHeaderData:{ title:'Curiosity lands on Mars!', subTitle:'Rover successfully touches down on Mars' },
    story: 'Lorem ipsum dolor sit amet...'
  }
);
console.log('newsItemOutput: ', newsItemOutput);

NOTE: Templates are defined inline below for the sake of simplicity. Normally, they should usually be defined in separate files and included using a dependency manager such as RequireJS or a workflow tool.

Something went wrong with that request. Please try again.