小胡子条件和循环

Posted 2023-05-08

【中文标题】小胡子条件和循环

【英文标题】：Mustache Conditions and Loops

【发布时间】：2013-02-09 02:50:51

【问题描述】：

这里是资源：

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

【参考方案1】：

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

使用选择和反转选择

这是来自 mustache 文档的示例：

  "repos": []

模板：

#repos<b>name</b>/repos
^reposNo repos :(/repos

输出：

No repos :(

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

json：

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 readme

【参考方案2】：

最佳答案（对于 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 

但这样做有点肮脏……

【讨论】：

脏但有效:) 类似的答案在这里：***.com/a/17897136/188926