处理mustache.js中的空列表

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

改用把手.它是Mustache的超集,为您提供所需的更多功能.小胡子社区要求这个功能,但维护者拒绝把它放进去.

Answer 5

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

如果您不使用javascript（例如，在pystache或Scalate中），则不走运。然后，唯一的解决方案是引入一个单独的布尔值，或者将数组嵌套在一个对象中，如果您有一个空数组，则可以完全避免，例如建议使用maxbeatty。