How can I force jade to wear a mustache?

Question

This is my jade figurine:

section#entry-review-template.template(data-class='entry-review')   table     thead       tr         th='Date'         th='Title'         th     tbody 

When I start adding a mustache to it, I feel it starts losing her usual grace, since now she gets very picky about any pores in her face.

  {{^entries}}   h1='No Posts'   div='There are no blog posts to review.'   {{/entries}} 

However, when I try to add the last piece of mustache, to her body this time, she starts complaining, and she either breaks down and doesn't want to help, or just makes a mess

{{#entries}}   tr     td='{{date}}'     td='{{title}}'     td       a.remove-entry  {{/entries}} 

Resulting in something like this:

{{^entries}} <h1>No Posts</h1><div>There are no blog posts to review.</div>{{/entries}} {{#entries}} <table><thead><tr><th>Date</th><th>Title</th><th></th></tr></thead><tbody></tbody></table>{{date}}{{title}}<a class="remove-entry"></a>{{/entries}} 

I can't seem to make jade properly output my mustache plain text.

This is a node.js application that uses jade for templating my views on the server-side, I don't pass any models to any of my views (that kind of heavy lifting I leave to the client-side), but I still need to do a bunch of inclue partial everywhere. And I have lots of jade. And I kind of love jade. I don't want to let go of her.

Now I want to implement very simple mustache templates on the client-side, and I'd like these to be inline in my views.

Of course, I could work around it, and have these in script tags or render them with another view engine (now that I think about it, it doesn't even feel an easy or simple thing to do), but then I would have to write raw html for those, and I kind of wanted to mix the best of both worlds.

• Am I crazy for even trying?
• How can I tell jade this is just a game and get her to ignore my {{#must}} {{/ache}}?
• Can jade be told to somehow ignore whitespace?
• What other options do you think I should consider?

I really want jade to wear a mustache. I know its weird, but it'd turn me on.

Update:

I just tried using the |, documented here, but even the simplest:

section#entry-review-template.template(data-class='entry-review')   table     thead       tr         th='Date'         th='Title'         th     tbody       | {{#entries}}       | {{/entries}} 

ends up outputting:

{{#entries}} {{/entries}} <table><thead><tr><th>Date</th><th>Title</th><th></th></tr></thead><tbody></tbody></table><h1></h1> 

Answer 1

Let's define some Jade mixins.

mixin if(name)   != '{{#' + name + '}}'   block   != '{{/' + name + '}}'  mixin unless(name)   != '{{^' + name + '}}'   block   != '{{/' + name + '}}'  mixin each(name)   != '{{#' + name + '}}'   block   != '{{/' + name + '}}' 

Use them fluently in your Jade template:

section#entry-review-template.template(data-class='entry-review')   +unless('entries')     h1='No Posts'     div='There are no blog posts to review.'   table     thead       tr         th='Date'         th='Title'         th     tbody       +each('entries')         tr           td='{{date}}'           td='{{title}}'           td             a.remove-entry 

A beautiful mustache-HTML is generated.

<section id="entry-review-template" data-class="entry-review" class="template">{{^entries}}   <h1>No Posts</h1>   <div>There are no blog posts to review.</div>{{/entries}}   <table>     <thead>       <tr>         <th>Date</th>         <th>Title</th>         <th></th>       </tr>     </thead>     <tbody>{{#entries}}       <tr>         <td>{{date}}</td>         <td>{{title}}</td>         <td><a class="remove-entry"></a></td>       </tr>{{/entries}}     </tbody>   </table> </section> 

Answer 2

Ok, so this might be coming way too late to be of any use, and there is already an accepted answer (where BTW I did not quite understand what "could remove the comments" really meant there). However, I thought it might be useful to all in future work, so here is what I have found so far.

Took the little snippets from your code above and put them into an example using the same simple "text output" syntax that apparently gave you weird jumbled output:

section#entry-review-template.template(data-class='entry-review')   table     thead       tr         th Date         th Title         th     tbody       | {{#entries}}       tr         td {{date}}         td {{title}}         td           a.remove-entry       | {{/entries}} 

Put it in an edit box at the Jade live site (http://naltatis.github.com/jade-syntax-docs) and got the output from Jade as:

<section id="entry-review-template" data-class="entry-review" class="template">   <table>     <thead>       <tr>         <th>Date</th>         <th>Title</th>         <th></th>       </tr>     </thead>     <tbody>{{#entries}}       <tr>         <td>{{date}}</td>         <td>{{title}}</td>         <td><a class="remove-entry"></a></td>       </tr>{{/entries}}     </tbody>   </table> </section> 

Then took that an tried it at the TryHandlebars site (http://tryhandlebarsjs.com) with the following data:

{ "entries" :   [    { "date" : "Jan 2, 2010", title: "ABCDEF" },    { "date" : "Nov 15, 2012", title: "UVWXYZ" }   ] } 

And it executed properly with the following output:

<section id="entry-review-template" data-class="entry-review" class="template">   <table>     <thead>       <tr>         <th>Date</th>         <th>Title</th>         <th></th>       </tr>     </thead>     <tbody>       <tr>         <td>Jan 2, 2010</td>         <td>ABCDEF</td>         <td><a class="remove-entry"></a></td>       </tr>       <tr>         <td>Nov 15, 2012</td>         <td>UVWXYZ</td>         <td><a class="remove-entry"></a></td>       </tr>     </tbody>   </table> </section> 

I don't know if I'm doing something different from what you were trying, but it seems (on the surface at least) that it is possible to manually produce Mustache/Handlebars templates from Jade templates without conflicts. There could be some conflicts with more complex templates, but I have not found any.

I myself have been toying with this idea for quite some time, and have been doing a bit of digging around. My main driver was however was that really I liked the simple "logic-less" logic constructs of Mustache/Handlebars and beautiful verbosity reduction of Haml/Jade, and I wanted a combination. Towards that end, it seems that a better option might be Hamlbars or even better EmblemJS, which I'm experimenting with.