Client Side Jade Template Service

Question

I want to use client-side Jade templates with Backbone. How can i do this?

At the moment, I have successfully configured Backbone (Marionette) to compile Jade templates for use in my views:

Marionette.TemplateCache.prototype.compileTemplate = (tmplStr) -> console.log "jade stuff: ", jade.compile(tmplStr) return jade.compile(tmplStr) 

"Problem": I am currently writing templates, for example:

 script(type="text/template", id="tmplMainView") | h1= title | p= content 

Note the pipes ( | ) that prevent Jade from trying to interpret / analyze them on the server side. How can I fix them?

UPDATE

Maybe I can use the jade --client flag ... but it gives one compiled function: for example

 h1= title 

Is becoming

 function anonymous(locals, attrs, escape, rethrow, merge) { attrs = attrs || jade.attrs; escape = escape || jade.escape; rethrow = rethrow || jade.rethrow; merge = merge || jade.merge; var buf = []; with (locals || {}) { var interp; buf.push('<h1>'); var __val__ = title buf.push(escape(null == __val__ ? "" : __val__)); buf.push('</h1>'); } return buf.join(""); } 

Does this mean that I have to have 1 Jade / compiled JS for each template? How can i use it? Also I think many JS files are a slow way to work? But since all the functions of the template are called anonymous, how can I then contact or somehow work effectively with them?

Answer 1

Check out the ClientJade project.

From your site:

clientjade is a command line tool to compile your jade patterns into client-side patterns for use in a browser. It will automatically include everything you need to render the templates, no need to include jade.js or runtime.js.

 $ clientjade test1.jade test2.jade > templates.js 

And then include the template.js file in your html. To display templates, just call like this:

 //jade.render(domNode, templateName, data); jade.render(document.getElementById('test1'), 'test1', { name: 'Bob' }); 

Answer 2

Having looked at Jadify and ClientJade and faced with several problems along the way ... (maybe this is just what I missed), I decided to investigate just server-side compilation of templates.

I defined a Node module (used by ExpressJS) that compiles and returns a compiled JS source (which I served with /js/templates.js ).

 fs = require "fs" jade = require "jade" async = require "async" # done callback will be passed (source, err) exports.compile = (done, templatesDir) -> js = "var Templates = {}; \n\n" # get all files in templates directory fs.readdir templatesDir, (err, files) -> # keep only ".jade" files jadeFiles = files.filter (file) -> file.substr(-5) == ".jade" # function to compile jade templates (appending to js source) compileTmpl = (file, doneCompile) -> # "test.jade" becomes "test" key = file.substr(0, file.indexOf(".")) filePath = templatesDir + file fs.readFile filePath, (err, src) -> # store js function source into Templates.{key} js += "Templates." + key + " = " + jade.compile(src, { debug: false, client: true }).toString() + "; \n\n" doneCompile(err) # foreach jadeFile, compile template, then write templates.js file async.forEach jadeFiles, compileTmpl, (err) -> done(js, err) 

And I use pre-compiled templates on the client side, including templates.js and use templates, for example:

• Templates.tmpl1()
• Templates.tmpl2({ something: "Hello world", ... })

Read more about https://coderwall.com/p/hlojkw