javascript 处理 mustache.js 中的空列表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8745802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 04:27:58  来源:igfitidea点击:

Dealing with an empty list in mustache.js

javascriptlisttemplate-enginemustache

提问by Max Schmidt

I'm using mustache.js to render a template in javascript. I'd like to check if a list is empty or not to hide the <h2>tag in the following example. Is this possible or is mustache.js too logic-less?

我正在使用 mustache.js 在 javascript 中呈现模板。我想检查列表是否为空或不隐藏<h2>以下示例中的标签。这是可能的还是 mustache.js 太没有逻辑了?

This is the template:

这是模板:

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

and this is the data:

这是数据:

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

回答by Qazzian

You could use persons.length. If it is a truthy value (i.e. greater than 0) then the block will be rendered.

你可以使用persons.length。如果它是一个真值(即大于 0),那么块将被渲染。

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

回答by Bouke Versteegh

After struggling for half a day with this problem, I've finally found an easy solution!

在这个问题上挣扎了半天后,我终于找到了一个简单的解决方案!

Don't check for the list, but check if its first item is not empty!

不要检查列表,而是检查它的第一项是否不为空!

Template:

模板:

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

Data:

数据:

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

Output:

输出:

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

Data:

数据:

{
  "persons": []
}

Output:

输出:

"No Persons"

回答by Yuriy Nemtsov

To keep your template logic-less, you can make this check before rendering the template:

为了让你的模板没有逻辑,你可以在渲染模板之前做这个检查:

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

Then your template will look like this:

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

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

回答by andrewrk

Use handlebarsinstead. It's a superset of Mustache which gives you that little bit more power that you need. The mustache community asked for this feature but the maintainer refuses to put it in.

改用车把。它是 Mustache 的超集,可为您提供所需的更多功能。mustache 社区要求此功能,但维护人员拒绝将其放入.

回答by iwein

In javascript you can check with {{#names.length}}{{/names.length}}or with {{#names.0}}

在javascript中,您可以使用{{#names.length}}{{/names.length}}或使用{{#names.0}}

If you're outside of javascript (e.g. in pystache or Scalate), you're out of luck. The only solution then is to introduce a separate boolean, or nest your array in an object which you avoid entirely if you have an empty array, like maxbeatty suggested.

如果您在 javascript 之外(例如在 pystache 或 Scalate 中),那么您就不走运了。唯一的解决方案是引入一个单独的布尔值,或者将您的数组嵌套在一个对象中,如果您有一个空数组,则完全避免该对象,如 maxbeatty 建议的那样。