23

这是我的玉雕：

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到处做一堆。我有很多玉。我有点喜欢玉。我不想放开她。

现在我想在客户端实现非常简单的 mustache 模板，我希望这些模板可以内联在我的视图中。

当然，我可以解决它，将它们放在脚本标签中，或者用另一个视图引擎渲染它们（现在我想起来了，它甚至感觉不是一件容易或简单的事情），但我会为那些编写原始 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>
4

4 回答 4

11

让我们定义一些 Jade mixin。

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>
于 2015-02-07T16:08:20.533 回答
8

好的，所以这可能来得太晚了，没有任何用处，而且已经有一个公认的答案（顺便说一句，我不太明白“可以删除评论”的真正含义）。但是，我认为它在未来的工作中可能对所有人都有用，所以这是我目前发现的。

从上面的代码中提取小片段，并使用相同的简单“文本输出”语法将它们放入示例中，这显然给了你奇怪的混乱输出：

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 实时站点 ( 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，我正在试验。

于 2013-02-25T23:10:16.887 回答
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}}

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

于 2013-01-05T12:29:28.613 回答
2

Emblem.js可以替代 Jade/Moustache 方法，因为它似乎做了一些非常相似的事情。然而它需要Ember.js。

于 2013-11-13T11:45:41.933 回答