mustache.js: Enumerable objects with outer variable

Question

Iv'e worked through this great tutorial.

var data = {
    employees: [
    {   firstName: "Christophe",
        lastName: "Coenraets"},
    {   firstName: "John",
        lastName: "Smith"}
    ]}; 
var template = "Employees:<ul>{{#employees}}" +
                            "<li>{{firstName}} {{lastName}}</li>" +
                            "{{/employees}}</ul>"; 
var html = Mustache.to_html(template, data); 
$('#sampleArea').html(html);

My question is how to iterate some property that belongs to the data object inside the employees object?

Here is an example, i want to print the label next to each one of the employees before the close of the </li> tag:

var data = {
    employees: 
    [{
        firstName: "Christophe",
        lastName: "Coenraets"
    }],
    label: "red"
};

var template = "Employees:<ul>{{#employees}}" +
                            "<li>{{firstName}} {{lastName}}" + 
                            "the label is: {{label}}" +
                            "</li>" +
                            "{{/employees}}</ul>"; 

but the above example will obviously would not work because label is a property of data, not of employees.

Answer 1

you can try this: use "../" to go one level higher

var template = "Employees:<ul>{{#employees}}" +
                            "<li>{{firstName}} {{lastName}}" + 
                            "the label is: {{../label}}" +
                            "</li>" +
                            "{{/employees}}</ul>"; 

another solution would be to render the whole node like that:

var template = "{{#data}}Employees:<ul>{{#data.employees}}" +
                                "<li>{{data.employees.firstName}} {{data.employees.lastName}}" + 
                                "the label is: {{data.label}}" +
                                "</li>" +
                                "{{/data.employees}}</ul>{{/data}}"