Dealing with an empty list in mustache.js

Question

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?

This is the template:

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

and this is the data:

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

Answer 1

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

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

Answer 2

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"

Answer 3

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}}

Answer 4

Use handlebars instead. 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.