Using Jade templates in Backbone.js

Question

I love the HAML-like syntax of Jade's templating engine in Node.js, and I would love to use it client-side within Backbone.js.

I've seen Backbone commonly using Underscore.js templating in the following style.

/* Tunes.js */
window.AlbumView = Backbone.View.extend({
  initialize: function() {
    this.template = _.template($('#album-template').html());
  },

  // ...
});

/* Index.html */
<script type="text/template" id="album-template">
  <span class="album-title"><%= title %></span>
  <span class="artist-name"><%= artist %></span>
  <ol class="tracks">
    <% _.each(tracks, function(track) { %>
      <li><%= track.title %></li>
    <% }); %>
  </ol>
</script>

What I'd like to see is a way to use AJAX (or some other method) to fetch Jade templates and render them within the current HTML.

Answer 1

I was able to run Jade client-side using jade-browser project.

Integration with Backbone is then simple: Instead of _template() I'm using jade.compile().

HTML (scripts and template):

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

<script type="template" id="test">
div.class1
  div#id
    | inner
  div#nav
    ul(style='color:red')
      li #{item}
      li #{item}
      li #{item}
      li #{item}
script
  $('body').append('i am from script in jade')
</script>

JavaScript (integration with Backbone.View):

var jade = require("jade");

var TestView = Backbone.View.extend({

  initialize: function() {
    this.template = jade.compile($("#test").text());
  },

  render: function() {
    var html = this.template({ item: 'hello, world'});
    $('body').append(html);
  }
});

var test = new TestView();
test.render();

HERE is the code.

Answer 2

As @dzejkej mentioned above, one of the best known ways to use Jade templates on the client is to use jade-browser; however, I've always had a few issues with Jade in the browser.

• Compiling Jade templates is slow - which is okay, but really, all templates should be cached, and if you cache them on the client, anytime they load a new page, the cache disappears (unless using HTML5 persistent storage, for example).
• File includes can be a pain and can create excess bloat. If you are compiling Jade templates on the browser and the template contains include statements, you may have to do some extra work to get them to compile properly. In addition, if you decide to compile on the server and send JavaScript to the client, you still have issues. Whenever Jade templates use file includes, your compiled Jade templates can get rather large because they contain the same code over and over. For example, if you include the same file again and again, that file's contents will be downloaded to the browser several times, which is wasting bandwidth.
• Lack of support - Jade provides little support for client-side templates out of the box. Yes, you can use the {client: true} compiler option, but the compiled templates are really not optimized for the client, and in addition, there is no mechanism for serving compiled Jade templates to the browser.

These are among some of the reasons why I created the Blade project. Blade is a Jade-like templating language that supports client-side templates right out of the box. It even ships with Express middleware designed for serving compiled templates to the browser. If you are okay with a Jade-like alternative for your projects, check it out!

• https://github.com/bminer/node-blade
• https://github.com/bminer/node-blade#blademiddlewaresourcepath-options
• https://github.com/bminer/node-blade#browser-usage