Javascript 胡须条件和循环

以下是资源：

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

{{如果你有徽章}
徽章
{{如果你的徽章被解锁}
解锁！
{{loop_徽章{u解锁}}
{{end_loop_徽章_unlocked}}
{{结束{如果{你的徽章}
{{如果你的徽章被锁上了}
锁上了！
{{loop_-badges_-locked}}
{{end_loop_徽章_locked}}
{{结束}如果}有}徽章}
{{如果你有徽章就结束}

如何编写此算法以使用Mustache编译器

---

我需要从两方面着手，第一是RubyOnRails应用程序，第二是客户端（JavaScript）。

有两种解决方案

使用选择和反向选择 以下是小胡子文档中的一个示例：

{
  "repos": []
}

模板：

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

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

Json:

胡子：

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

{{{任何徽章}
解锁！
{{/anyBadges}
{{{徽章解锁}
{{/badges_unlocked}

不要在无逻辑模板中执行逻辑 这就是我要做的。如果你的胡子模板中有条件逻辑，我认为你做错了。您可以使用在这方面更高级的方法，或者将您的逻辑移到其他地方（到javascript）

请参见

最好的答案（对于Ruby和JavaScript）是将您的逻辑（如果您有_徽章，请参见类型问题）封装到视图类中

实际上，您可以通过使用array

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

{{{#badges.length}
徽章
{{{#徽章.unlocked.length}
解锁！
{{{#徽章.解锁}
{{/badges.unlocked}
{{/badges.unlocked.length}
{{{#徽章.locked.length}
锁上了！
{{{#徽章.锁定}
{{/badges.locked}
{{{#徽章.locked.length}
{{/badges.length}

但这样做有点肮脏…

肮脏但有效：）这里的答案类似：

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

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