javascript - 使用单个变量定义 Mustache 标签

Question

是否有任何选项可以使用一些定义变量来设置 Mustache 标签？像这样的事情:

Json

{
    "color_set_01": [
        "white", "black"
        ],
    "color_set_02": [
        "green", "red"
    ]
}

JavaScript

var color = 'color_set_' + options.number;

$.getJSON('json/data.json', function(data) {
    var template = "<ul>{{color}}<li class="{{.}}"></li>{{/color}}</ul>";
    var html = Mustache.to_html(template, data);
    colors_panel.html(html);
});

以及所需的结果(如果它是 color_set_01 数组

)

<div class="colors_panel">
    <ul>
      <li class="white">
      <li class="black">
    </ul>
</div>

Answer 1

好的，快速浏览一下 http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/ 后，我认为这会起作用:

var template = "<ul>{{#"+color+"}}<li class=\"{{.}}\"></li>{{/"+color+"}}</ul>";

看起来#设置了使用列表的能力，.基本上是列表的每一项。另外，您需要转义模板字符串中的引号。

这还假设您的 JSON 应该如下所示:

{
    "color_set_01": [
        "white", "black"
    ],
    "color_set_02": [
        "green", "yellow"
    ]
}

如果您的 JSON 中有多个 color_set，那么您必须显示 color_set_01 的父级直到顶部，以便我进一步提供帮助.