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

Jade now supports compiling for the client by default; use the -c --client option. See http://jade-lang.com/command-line.

Answer 2

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

---

browserify

Maybe you can use https://github.com/substack/node-browserify

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

http://jsperf.com/dom-vs-innerhtml-based-templating/53 => The performance isn't that great according to this benchmark => http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js. 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.

Answer 3

This feature is now available in Jade. http://jade-lang.com/api/

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.

Answer 4

I've just made a library for making jade available in client-side html. It is as simple as < jade>...< /jade>. Check it out: https://github.com/charlieamer/jade-query

Answer 5

Checkout Blade. It is a Jade-like HTML template engine that is designed for client-side (and server-side) use. There are some other features that you guys might like, as well.

EDIT: But, only for Node.js servers. There is no Ruby implementation at this time.

Answer 6

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.