javascript - Mustache - 有条件地从数组数据渲染列表

Question

我有一个现有的应用程序，它使用 Mustache.js 进行模板化，并且我需要有条件地从来自服务器的数组数据 (json) 渲染列表。 mustache 可以做到这一点吗？

一些示例数据:

"Preferences": ["pref-red", "pref-blue"]

很容易通过以下方式输出:

<ul class="plain">
    {{#Preferences}}
    <li>{{.}}</li>
    {{/Preferences}}
</ul>

但我真正想做的是根据返回的任何首选项数据有条件地渲染静态列表的适当部分。一些非常愚蠢的伪代码:

<ul class="plain">
    {{#Preferences}}
        {{if pref-red}}<li class="icon red bell">Red</li>{{/if}}
        {{if pref-green}}<li class="icon green car">Green</li>{{/if}}
        {{if pref-blue}}<li class="icon blue cat">Blue</li>{{/if}}
        {{if pref-yellow}}<li class="icon yellow flower">Yellow</li>{{/if}}
        {{if pref-purple}}<li class="icon purple house">Purple</li>{{/if}}
    {{/Preferences}}
</ul>

在这种情况下，浏览器中的输出为:

<ul class="plain">
    <li class="icon red bell">Red</li>
    <li class="icon blue cat">Blue</li>
</ul>

我知道 Mustache 没有 if 条件，但这可以在 Mustache 中实现吗？如果可能的话，我想将其保留给 Mustache(减少、重复使用、回收)。

Answer 1

不，Mustache 无法用您的原始数据来实现这一点。

您的两个选择:

• 转换您的输入数据，以便 Mustache 可以呈现它。
• 更改渲染引擎。您自己已将handlebars.js 标记添加到您的问题中:您已经有了答案。