Alex Rivera | Logout

How can I force jade to wear a mustache?

Asked 2013-01-04T06:29:43.017
23

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

Edit
Report

1 Answer

8

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">
  &l
answered 2013-02-25T23:10:16.887

Your Answer