Javascript Templates

Pipeline allows you to use javascript templates along with your javascript views. To use your javascript templates, just add them to your JAVASCRIPT group

PIPELINE['JAVASCRIPT'] = {
  'application': {
    'source_filenames': (
      'js/application.js',
      'js/templates/**/*.jst',
    ),
    'output_filename': 'js/application.js'
  }
}

For example, if you have the following template js/templates/photo/detail.jst

<div class="photo">
 <img src="<%= src %>" />
 <div class="caption">
  <%= caption %>
 </div>
</div>

It will be available from your javascript code via window.JST

JST.photo_detail({ src:"images/baby-panda.jpg", caption:"A baby panda is born" });

Configuration

Template function

By default, Pipeline uses a variant of Micro Templating to compile the templates, but you can choose your preferred JavaScript templating engine by changing PIPELINE['TEMPLATE_FUNC']

PIPELINE['TEMPLATE_FUNC'] = 'template'

Template namespace

Your templates are made available in a top-level object, by default window.JST, but you can choose your own via PIPELINE['TEMPLATE_NAMESPACE']

PIPELINE['TEMPLATE_NAMESPACE'] = 'window.Template'

Template extension

Templates are detected by their extension, by default .jst, but you can use your own extension via PIPELINE['TEMPLATE_EXT']

PIPELINE['TEMPLATE_EXT'] = '.mustache'

Template separator

Templates identifier are built using a replacement for directory separator, by default _, but you specify your own separator via PIPELINE['TEMPLATE_SEPARATOR']

PIPELINE['TEMPLATE_SEPARATOR'] = '/'

Using it with your favorite template library

Mustache

To use it with Mustache you will need some extra javascript

Mustache.template = function(templateString) {
  return function() {
    if (arguments.length < 1) {
      return templateString;
    } else {
      return Mustache.to_html(templateString, arguments[0], arguments[1]);
    }
  };
};

And use these settings

PIPELINE['TEMPLATE_EXT'] = '.mustache'
PIPELINE['TEMPLATE_FUNC'] = 'Mustache.template'

Handlebars

To use it with Handlebars, use the following settings

PIPELINE['TEMPLATE_EXT'] = '.handlebars'
PIPELINE['TEMPLATE_FUNC'] = 'Handlebars.compile'
PIPELINE['TEMPLATE_NAMESPACE'] = 'Handlebars.templates'

Ember.js + Handlebars

To use it with Ember.js, use the following settings

PIPELINE['TEMPLATE_EXT'] = '.handlebars'
PIPELINE['TEMPLATE_FUNC'] = 'Ember.Handlebars.compile'
PIPELINE['TEMPLATE_NAMESPACE'] = 'window.Ember.TEMPLATES'
PIPELINE['TEMPLATE_SEPARATOR'] = '/'

Prototype

To use it with Prototype, just setup your PIPELINE['TEMPLATE_FUNC']

PIPELINE['TEMPLATE_FUNC'] = 'new Template'