6

How can I force Jade to wear a mustache?

 3 years ago
source link: https://www.codesd.com/item/how-can-i-force-jade-to-wear-a-mustache.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How can I force Jade to wear a mustache?

advertisements

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>


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>




About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK