9

以下是资源：

JSON

{
  "badges":{
    "unlocked": [
      {"name": "Win 1"},
      {"name": "Win 2"},
      {"name": "Win 3"}
    ],
    "locked":[
      {"name": "Lose 1"},
      {"name": "Lose 2"},
      {"name": "Lose 3"}
    ]
  }
}

算法

{{ if_has_badges }}
<div class="badges">
  <h1>Badges</h1>

  {{ if_has_badges_unlocked }}
    <div class="badges-unlocked">
      <h2>Unlocked!</h2>
      {{ loop_badges_unlocked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{ end_loop_badges_unlocked }}
    </div>
  {{ end_if_has_badges_unlocked }}

  {{ if_has_badges_locked }}
    <div class="badges-locked">
      <h2>Locked!</h2>
      {{ loop_badges_locked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{ end_loop_badges_locked }}
    </div>
  {{ end_if_has_badges_locked }}

</div>
{{ end_if_has_badges }}

我如何编写这个算法来使用 Mustache 编译器？

我需要这样做才能与两个方面一起工作，第一个是 RubyOnRails 应用程序，第二个是客户端 (JavaScript)。

4

2 回答 2

13

您的问题有两种解决方案。

使用选择和反转选择

这是来自 mustache 文档的示例：

{
  "repos": []
}

模板：

{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}

输出：

No repos :(

正如你看到的倒选让我做条件逻辑。在您的情况下，它看起来像：

杰森：

var viewModel = {
    badges:[]//badges here
}
viewModel.anyBadges = badges.length >0;

胡子：

    <div class="badges-unlocked">
   {{#anyBadges}}
      <h2>Unlocked!</h2>
   {{/anyBadges}}
   {{#badges_unlocked}}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
   {{/badges_unlocked}}

不要在无逻辑的模板中做逻辑

这就是我会做的。如果您的 Mustache 模板中有条件逻辑，我认为您做错了。您可以使用在这方面更先进的Handlebars ，或者将您的逻辑移到其他地方（到您的 javascript）。

请参阅Mustache 自述文件

于 2013-02-23T15:08:10.790 回答
5

最好的答案（对于 Ruby 和 JavaScript）是将您的逻辑（if_has_badges类型问题）封装到 View 类中。

length实际上，您可以使用数组属性为 Ruby 和 JavaScript 中所需的一点逻辑伪造它：

{{# badges.length }}
<div class="badges">
  <h1>Badges</h1>

  {{# badges.unlocked.length }}
    <div class="badges-unlocked">
      <h2>Unlocked!</h2>
      {{# badges.unlocked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{/ badges.unlocked }}
    </div>
  {{/ badges.unlocked.length }}

  {{# badges.locked.length }}
    <div class="badges-locked">
      <h2>Locked!</h2>
      {{# badges.locked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{/ badges.locked }}
    </div>
  {{# badges.locked.length }}

</div>
{{/ badges.length }}

但这有点肮脏的做法......

于 2013-02-24T10:43:33.727 回答