Question

我正在使用mustache.js在javascript中渲染模板。我想在下面的示例中检查列表是否为空以隐藏<h2>标记。这是可能的还是mustache.js太逻辑了？

这是模板：

<h2>Persons:</h2>
<ul>
  {{#persons}}
    {{name}}
  {{/persons}}
</ul>

这是数据：

{
  "persons":[
    {"name": "max"},
    {"name": "tom"}
  ]
}

Answer 1

你可以使用persons.length。如果它是一个真值（即大于0），则将呈现该块。

{{#persons.length}}
<h2>Persons:</h2>
<ul>
  {{#persons}}
    <li>{{name}}</li>
  {{/persons}}
</ul>
{{/persons.length}}

Answer 2

在遇到这个问题困扰了半天之后，我终于找到了一个简单的解决方案！

请勿检查列表，但检查其第一项是否为空！

模板：

{{#persons.0}}
<h2>Persons:</h2>
<ul>
  {{#persons}}
    <li>{{name}}</li>
  {{/persons}}
</ul>
{{/persons.0}}
{{^persons.0}}No persons{{/persons.0}}

数据：

{
  "persons":[
    {"name": "max"},
    {"name": "tom"}
  ]
}

输出：

<h2>Persons:</h2>
<ul>
  <li>max</li>
  <li>tom</li>
</ul>

数据：

{
  "persons": []
}

输出：

"No Persons"

Answer 3

为了保持模板的逻辑性，您可以在渲染模板之前进行此检查：

// assuming you get the JSON converted into an object
var data = {
    persons: [
        {name: "max"}
      , {name: "tom"}
    ]
};
data.hasPersons = (data.persons.length > 0);

然后您的模板将如下所示：

<h2>Persons:</h2>
{{#hasPersons}}
<ul>
  {{#persons}}
    <li>{{name}}</li>
  {{/persons}}
</ul>
{{/hasPersons}}

Answer 4

请改用handlebars。它是Mustache的超集，可以为您提供所需的更多功能。小胡子社区要求这个功能，但维护者refuses to put it in。

Answer 5

在javascript中，您可以查看{{#names.length}}{{/names.length}}或{{#names.0}}

如果你不在javascript之外（例如在pystache或Scalate中），那你就不走运了。唯一的解决方案是引入一个单独的布尔值，或者将数组嵌套在一个对象中，如果你有一个空数组，就像你建议的maxbeatty一样，你可以完全避免它。

处理mustache.js中的空列表

5 个答案: