How to use Backbone templates in Jade

Using Backbone templates in Jade

I was wondering how to use Backbone templates in Jade, because there is a problem when using them because of syntax. An example:

The problem

Example.html

div(style="display: none;")#example 
  a(id='document_')

Example.js

var SampleView = Backbone.View.extend({ 
  template: _.template($('#example').html()), 
  render: function() { 
    var template = this.template({ 
      id: this.model.id, 
      title: this.model.get('title') 
    }); 
    $(this.el).html(template); 
    return this; 
  } 
});

This doesn’t work because Jade is compiling the content and the variables disappear.

The solution

There are a few tags that Jade doesn’t compile it: script and style.

When you use script, remember include the attribute type=’text/template’ else its code will be evaluate as Javascript and it will be generate error messages.

The example working:

script(type='text/template')#example 
  a(id='document_')