Ruby-on-rails 胡子条件和循环

Mustache Conditions and Loops

提问by Caio Tarifa

Here are the resources:

以下是资源：

JSON

JSON

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

Algorithm

算法

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

How I can write this algorithm to work with Mustache compiler?

我如何编写此算法以与 Mustache 编译器一起使用？

I need to do this to work with two sides, first is the RubyOnRails application and the second is the client-side (JavaScript).

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

回答by Benjamin Gruenbaum

There are two solutions to your problem.

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

Using selections and inverted selections

使用选择和反向选择

Here is an example from the mustache documentation:

这是 mustache 文档中的一个示例：

{
  "repos": []
}

Template:

模板：

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

Output:

输出：

No repos :(

As you see the inverted selections let me do conditional logic. In your case it would look something like:

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

Json:

杰森：

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

Mustache:

胡子：

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

Don't do logic in logic-less templating

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

This is what I would do. If you have conditional logic in your Mustache templates I think you're doing it wrong. You can either use Handlebarsinstead which is much more advanced in this regard or move your logic someplace else (to your javascript).

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

Please see the Mustache readme

请参阅Mustache 自述文件

回答by bobthecow

The best answer (for both Ruby and JavaScript) is to encapsulate your logic (the if_has_badgestype questions) into a View class.

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

You can actually fake it for the little bit of logic you need in both Ruby and JavaScript by using the array lengthproperty:

实际上，您可以通过使用数组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 }}

But that's a bit of a dirty way of doing it...

但这有点肮脏的方式......