Using Jade Templates ( client-side

I’d like to use Jade templates client-side. Preferably generated using the Rails 3.1 asset pipeline. I can’t really figure out how to do this.

Anyone who’ve stumbled upon the same problem and found a great solution? Any thoughts are much appreciated.

If you use browserify you can use this handy jade middleware: jadeify.
Then you can just call jadeify("foo.jade", { x : 4, y : 5 }) browser-side after pointing a views directory at the middleware and you get back a jquery handle.

P.S: Probably right now Substack’s answer is better.


Maybe you can use

Browser-side require() for your node
modules and npm packages

Just point a javascript file or two at
browserify and it will walk the AST to
read all your require()s recursively.
The resulting bundle has everything
you need, including pulling in
libraries you might have installed
using npm!

Browser => The performance isn’t that great according to this benchmark => But according to TJ it was never supposed to be used in the browser, but node.js instead. In that case it is going to be pretty fast. There are a lot of alternatives which you can use in the browser instead.

This feature is now available in Jade.

From their API Documentations:

var jade = require('jade');

// Compile jade file to a function
var fn = jade.compileClient('string of jade', options);

// Later in client site, render the function to HTML
var html = fn(locals);

You should pass the compiled javascript function to the client, for example by writing the function (fn in the example) to a .js file and then include the .js file in the html file with script tag.

Another option is using templatizer, which compiles jade to a .js file for you.

I wrote a gem called tilt-jade to do this within the asset pipeline. It’s made to work exactly like EJS does with sprockets by default – it renders Jade templates down into functions so they can be called client side. I’m not sure it’s a great solution, but it has worked okay for my needs.

I’ve just made a library for making jade available in client-side html. It is as simple as < jade>…< /jade>. Check it out:

Jade now supports compiling for the client by default; use the -c --client option. See

Here’s a hacky but simple version for browserify using gulp-jade.

var jade = require('gulp-jade'),
    replace = require('gulp-replace');

gulp.task('jade-client', function() {
            client: true
        .pipe(replace(/function template/g, 'var jade = require("gulp-jade/node_modules/jade/lib/runtime");\n\nmodule.exports = function'))

Then in my client side JS file…

var template = require('./path_to_compiled_template_file');
var renderedTemplateHtml = template({ aLocal: 'blah blah'});

So you only send to the client the specific templates you need and browserify makes sure you only have one copy of the runtime.

Read More:   rerendering events in fullCalendar after Ajax database update

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts