Using Jade Templates (jade-lang.com) client-side

Question

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 stumb

Answer 1

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() {
    gulp.src('./views/**/*.jade')
        .pipe(jade({
            client: true
        }))
        .pipe(replace(/function template/g, 'var jade = require("gulp-jade/node_modules/jade/lib/runtime");\n\nmodule.exports = function'))
        .pipe(gulp.dest('./client/templates'));
});

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.

Answer 2

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.