Awesome

underscore-tpl

underscore-tpl is a RequireJS plugin to load and precompile Underscore.js templates.

Here are some performance tests that show the difference when rendering precompiled templates.

Usage

Use the tpl! prefix when loading a template.

myview.js

define(['tpl!mytemplate.tpl'], function (template) {

  var MyView = Backbone.View.extend({
    template: template // just pass in the template
  });                  // do not use _.template(), at this point it is already compiled

  return MyView;
});

The plugin will compile the template after requirejs r.js optimizer.

And also when developing, it will compile the template the first time is loaded so that the next time is required it will just render the template saving a function call to underscore's internal render method.

Configuration

You can pass underscoreTemplateSettings to RequireJS config

requirejs.config({
  config: {
    underscoreTemplateSettings: {
      interpolate: /\{\{\s*([^#\{]+?)\s*\}\}/g,  // {{ title }}
      evaluate:    /\{\{#([\s\S]+?)\}\}/g,       // {{# console.log("stuff") }}
      escape:      /\{\{\{([\s\S]+?)\}\}\}/g     // {{{ title }}}
    }
  });

Dependecies

For this plugin to work you need:

• Underscore.js
• RequireJS text plugin

License

See LICENSE