Jade templating in Meteor

Question

In the Meteor FAQs http://meteor.com/faq/how-do-i-package-a-new-templating-system there is some information about adding a different (than the default Handlebars) templating system. Jade is the only other example explicitly called out elsewhere in the docs.

So is somebody already working on Jade? If not, is it feasible for me to start? Or is it still too early? e.g. :

The package API is rapidly changing and isn't documented, so you can't make your own packages just yet. Coming soon.

I've been trying to love Handlebars in my current Ember.js project, but for me nothing is as elegant as Jade.

Answer 1

We would love to see Jade integration. Use packages/handlebars as a template.

The basic strategy is to wire the output of the template engine into Meteor.ui.render which is how we implement live page updates. As long as your template returns HTML, that'll work. Any time a Jade template references a Meteor.Collection document or Session variable, Meteor will register that dependency so that knows to rerender the template when the data changes.

Even better, though, is to also use Meteor.ui.chunk and Meteor.ui.listChunk. These will limit the amount of recalculation Meteor has to do when there's a change. For example, if you are rendering a list of documents using {{#each}} in Handlebars-speak, there's no reason to recalculate the whole template when a new document enters the result set. We just render one HTML chunk for the new document, and insert that right into the DOM. That's listChunk in action.

So you'll likely find that instrumenting just if/unless and for/each in Jade gets you a long way there.

Just be aware, package development is not as documented as the other parts of the system. So don't hesitate to ask more specific questions as you go.

Answer 2

meteor >= 0.8.0

Using the mquandalle:jade package has been officially recommended.

meteor <= 0.7.2

1. If you are not using CoffeeScript, you should check out jade-handlebars. As of this writing, there is an issue where CoffeeScript template files seem to need to be wrapped inside a Meteor.startup function which caused other issues for me.

2. If you are using CoffeeScript, you should check out my Cakefile. The details are all in the description, but the short version is that it automatically adds/removes/updates html files alongside your jade files. I ended up adding *.html to my .gitignore, which only works if you are not mixing html and jade in the same project. It's a bit of a hack but so far it's working fine for me.

Answer 3

Just publish my first meteor smart package on Atmosphere!

Use Jade+Handlebars instead of HTML+Handlebars

https://atmosphere.meteor.com/package/jade-handlebars

Answer 4

Just got jade templating working with my Meteor projects! And it is actual jade not jade-handlebars or some half form of jade. It is great but it needs Meteor UI which is currently in a development release called blaze-rc1. So it does not work with Meteor 0.7 at the moment.

do 'mrt add jade'

&

Run your meteor project using 'mrt --release blaze-rc1'

https://github.com/mquandalle/meteor-jade/

If you have coffeescript and jade files in the same folder add _ to the beginning of the file name so it loads jade files before the coffeescript file, otherwise it will not work correctly.

Answer 5

mrt add jade

in client/views/templates/hello.jade you could do something like this:

template(name="hello")
  h1 hello world!
  {{greeting}}

  input(type="button" value="click")

start you app with mrt