How to compile jade templates in to JavaScript functions to use them on client side?

Question

I want to use compiled jade templates on client side. How should I compile them to get javascript files ? https://github.com/visionmedia/jade

Answer 1

Yes you can! https://github.com/techpines/asset-rack#jadeasset

I just open sourced "asset-rack", a nodejs project that can can precompile jade templates and serve them in the browser as javascript functions.

This means that rendering is blazingly fast, even faster then micro-templates because there is no compilation step in the browser.

First you set it up on the server as follows:

new JadeAsset({
    url: '/templates.js',
    dirname: __dirname + '/templates'
});

If you template directory looked like this:

templates/
  navbar.jade
  user.jade
  footer.jade

Then all your templates come into the browser under the variable "Templates":

$('body').append(Templates.navbar());
$('body').append(Templates.user({name: 'mike', occupation: 'sailor'});
$('body').append(Templates.footer());

Answer 2

#coffeescript
jade = require 'jade'
data = '#menu'
options = 
  client: true
  compileDebug: false
fn = jade.compile data, options
console.log fn.toString()