Mustache templates: How to output a block only once for non-empty lists

Question

If my list is empty, I want to output this:

<div id="some-id">
</div>

If my list is non-empty, I want to output this:

<div id="some-id">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>etc</li>
  </ul>
</div>

Note that I output the <ul> and </ul> tags at most once, and only if the list is non-empty.

The following code is close to how I would do this in PHP, but is obviously wrong:

<div id="some-id">
{{#items}}
  <ul>
{{/items}}

{{#items}}
    <li>{{name}}</li>
{{/items}}

{{#items}}
  </ul>
{{/items}}
</div>

If items is a 3 item list, I'm going to get 3 <ul>'s - obviously not what I want.

I realise I could set some other key as a boolean flag (hasItems, perhaps), but this feels redundant.

Is there a more elegant way I can output a block only once for a non-empty list?

Answer 1

You could use non-false values of a section. name would have to be an object inside of items

data = { 'items' : { 'name' : ["Item 1", "Item 2", "etc"] } };

You template would look like:

<div id="some-id">
    {{#items}}
    <ul>
        {{#name}}
        <li>{{.}}</li>
        {{/name}}
    </ul>
    {{/items}}
</div>

Here's an example on jsFiddle showing the rendering of an items object with names and without -- http://jsfiddle.net/maxbeatty/fpQwk/

Answer 2

If you don't want to or can't reformat your data or templating engine, you can also just check items.length before rendering the <ul> tags. Some people frown upon this, but it's definitely an alternative to Max's answer.

{{#items.length}}
    <ul>
        {{items}}
            <li>{{name}}</li>
        {{/items}}
    </ul>
{{/items.length}}

Answer 3

The other two answers do not work for the Ruby implementation of Mustache. My solution was to send an additional parameter as part of the template context; e.g.

template = <<EOF
{{#has_items}}
<ul>
    {{#items}}
        <li>{{.}}</li>
    {{/items}}
</ul>
{{/has_items}}
EOF
items = ['one', 'two', 'three']
context = { items: items, has_items: items.any? }
Mustache.render(template, context)