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

Look for proposed solutions in the jade issue 149 discussion. Unfortunately, there is no built-in ready for use option, as I know.

Answer 2

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 3

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

Answer 4

You should probably look at integrating this into a Grunt build task.

See grunt-contrib-jade

Answer 5

Blade is a Jade-like HTML template engine that has a built-in middleware for serving compiled templates to the client. :) Check it out!

Answer 6

This question is a bit dated, but there is a method of compiling Jade templates,

var jade = require('jade');
var fn = jade.compile(jadeTemplate);
var htmlOutput = fn({
  maintainer: {
    name: 'Forbes Lindesay',
    twitter: '@ForbesLindesay',
    blog: 'forbeslindesay.co.uk'
  }
})

Just got to the tutorial and search for compile, or the API under

 jade.compile(source, options)

Be sure to set, compileDebug so you get the source,

Set this to false to disable debugging instrumentation (recommended in production). Set it to true to include the function source in the compiled template for better error messages (sometimes useful in development).