mustache - 循环 mustache 10 次

Question

我有如下的 JSON 字符串

{
  Red:10,
  Green: 0
}

所以我想显示以下行 10 次(如 Red: 10 )

<img src="img/red.png">

我如何使用 Mustache 做到这一点？

我试过了

{{# Red}}
<img src="img/red.png">
{{/ Red}}

但是没有效果

Answer 1

从这个页面:http://mustache.github.io/mustache.5.html

If the person key exists and has a non-false value, the HTML between the pound and slash will be rendered and displayed one or more times.

When the value is a non-empty list, the text in the block will be displayed once for each item in the list. The context of the block will be set to the current item for each iteration. In this way we can loop over collections.

这意味着您需要 {# Red} 来引用包含 10 个项目的列表才能这样做。似乎没有一种简洁的方法来表示 n 项的列表，因此您最好将 JSON 修改为类似

{
  Red: [
    { "value": "1" },
    { "value": "2" },
    ...
    { "value": "10" },
  ]
  Green: 0
}

我不确定，但您可能还需要引用 Red 和 Green。取决于您加载 JSON 的方式。

mustache 并不是真的适合做这样的事情。毕竟，它是无逻辑的模板。您应该考虑使用 Javascript 执行此操作。您可以考虑使用 Handlebars 将 Mustache 与 Javascript 结合使用。