Using jst templates with marionette

JST stands for Javascript Templates. This feature — available by default in Rails 3.1 (see notes)— allows you to distribute your Javascript templates as ready-to-use functions in your scripts.

This mechanism is very useful because it avoids having to download templates asynchronously or to distribute them in the source code of your pages.

To take advantage of JST in Rails 3.1, you just need to create views following naming conventions. To organize your code, here is the structure you might use:

app/assets
├── images
├── javascripts
├── stylesheets
└── templates
    ├── some_template.jst.eco
    └── some_folder
        ├── other_template.jst.eco
        └── yet_another_template.jst.eco

As you can see, we just use Rails naming conventions: jst is the format and eco is a template engine (among many others, as you will see later).

In order to share these templates with your Javascript, just require these files in your Javascript manifest (application.js, for instance):

//= require_tree ../templates

Now you can access your templates (as functions) through the global object JST which looks like:

{
  'some_template': function(){ ... },
  'some_folder/other_template': function(){ ... },
  'some_folder/yet_another_template': function(){ ... }
}

You just have to pass an object with your data to these functions in order to get proper HTML string.

Integrate with Marionette

To integrate JST into your Backbone Marionette application, you will have to override the Backbone.Marionette.Renderer.render:

Backbone.Marionette.Renderer.render = function(template, data){
  if (!JST[template]) throw "Template '" + template + "' not found!";
  return JST[template](data);
}

Then you can specify the path of your template as the template property of your views classes.

MyView = Backbone.Marionette.View.extend({
  template: 'some_folder/other_template'
});

Congratulations!

Many templates engines

EJS

EJS stands for Embedded Javascript. It basically provides the same syntax as ERB. Your files must be named like my_template.jst.ejs:

<ul>
  <% $.each(@friends, function(index, friend){ %>
    <li><%= friend.name %></li>
  <% } %>
</ul>

To use it, you have to install Ruby EJS gem.

Eco

Eco is quite the same as EJS instead you write CoffeeScript code (instead of Javascript). Just name your files like my_template.jst.eco:

<ul>
  <% for friend in @friends %>
    <li><%= friend.name %></li>
  <% end %>
</ul>

You have to install Ruby Eco gem in order to use it.

Handlebars

If you like mustaches you can use Handlebars templates by naming your files like my_template.jst.hbs:

<ul>
  {{#list @friends}}
    <li>{{name}}</li>
  {{/list}}
</ul>

You have to install Handlebars assets to use it.

Note that you need to require the handlebars.runtime package in your Javascript manifest.

Haml Coffee

If you are in fond of Haml and CoffeeScript, you can use Haml Coffee. Your files must be named like my_template.hamlc (note the absence of JST) or my_template.jst.hamlc (see the documentation for the difference between them).

%ul
  - for friend in @friends
    %li= friend.name

Note that you have to require the hamlcoffee package in your Javascript manifest.

Using JST without Rails 3.1

If you are not using Rails 3.1, there are other solutions to have JST.

• Sprockets
• Jammit