我怎么能强迫玉佩胡子？

Question

这是我的玉雕像:

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

当我开始添加胡子时,我觉得它开始失去她平常的优雅,因为现在她对她脸上的任何毛孔都非常挑剔.

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

然而,当我这次尝试将最后一块小胡子添加到她的身体时,她开始抱怨,她要么打破了,又不想帮忙,或者只是弄得一团糟

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

结果是这样的:

{{^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}}

我似乎无法让玉正确输出我的胡子纯文本.

这是一个node.js应用程序,它使用jade在我的服务器端模板化我的视图,我没有将任何模型传递给我的任何视图(我留给客户端的那种繁重的工作),但我仍然需要inclue partial到处做一堆.而且我有很多玉.我有点喜欢玉.我不想放开她.

现在我想在客户端实现非常简单的胡子模板,我希望这些模板在我的视图中内联.

当然,我可以解决它,并在脚本标签中使用它们或用另一个视图引擎渲染它们(现在我想到它,它甚至不觉得简单或简单的事情),但后来我会有为那些人编写原始html,我有点想要混合两全其美.

• 我甚至为了尝试而疯狂吗？
• 我怎么能告诉玉这只是一场比赛并让她忽略我{{#must}} {{/ache}}？
• 可以告诉玉以某种方式忽略空白吗？
• 您认为我应该考虑哪些其他选择？

我真的想要玉佩戴小胡子.我知道它很奇怪,但它会让我感动.

更新:

我刚尝试使用| ,记录在这里,但即使是最简单的:

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

最终输出:

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

Answer 1

让我们来定义一些Jade mixins.

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

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

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

在您的Jade模板中流畅使用它们:

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

生成一个漂亮的小胡子HTML.

<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

好的,所以这可能为时已晚,没有任何用处,而且已经有一个公认的答案(BTW我不太明白"可以删除评论"真正意味着什么).但是,我认为它在将来的工作中对所有人都有用,所以这是我迄今为止所发现的.

从上面的代码中获取小片段并使用相同的简单"文本输出"语法将它们放入一个示例中,这种语法显然给出了奇怪的混乱输出:

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}}

将它放在Jade live site(http://naltatis.github.com/jade-syntax-docs)的编辑框中,并将Jade 的输出作为:

<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>

然后使用以下数据在TryHandlebars网站(http://tryhandlebarsjs.com)上尝试了它:

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

它使用以下输出正确执行:

<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>

我不知道我是否正在尝试与您尝试的不同的东西,但似乎(至少在表面上)可以从Jade模板手动生成Mustache/Handlebars模板而不会发生冲突.可能与更复杂的模板存在一些冲突,但我没有发现任何冲突.

我自己一直在玩弄这个想法已经有一段时间了,并且已经做了一些挖掘.然而,我的主要驱动力是,我真的很喜欢Mustache/Handlebars的简单"无逻辑"逻辑结构和Haml/Jade的美丽冗长减少,我想要一个组合.为此,似乎一个更好的选择可能是Hamlbars甚至更好的EmblemJS,我正在试验.

Answer 3

解决方案：jade的HTML注释

  // {{#entries}}
  tr.entry-row(data-id='{{_id}}')
    td='{{date}}'
    td='{{title}}'
    td
      a.edit(title='Edit')='Edit'
      a.remove(title='Delete')
  // {{/entries}}

奇迹般有效。您可以事后删除评论，但这至少可以解决问题。