mustache.js：如何在可枚举对象迭代中访问外层变量

嘿，这个问题在使用Mustache模板引擎时挺常见的——当你迭代employees数组时，当前上下文会切换到每个员工对象，自然就没法直接访问上层data里的label属性了。我给你两种靠谱的解决方式：

方法一：使用父级上下文引用 ../ #

../ 是Mustache里用来回到上一级上下文的语法，在迭代employees时，用它就能直接访问到外层data对象的属性：

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

方法二：使用根上下文引用 @root #

如果你的Mustache版本比较新（比如v1.0+），可以用@root直接指向最顶层的data对象，不管嵌套多少层，都能直接访问根属性，这种方式在多层嵌套场景下更清晰：

var data = { employees: [{ firstName: "Christophe", lastName: "Coenraets" }], label: "red" };
var template = "Employees:<ul>{{#employees}}" + 
               "<li>{{firstName}} {{lastName}} " + 
               "the label is: {{@root.label}}" + 
               "</li>" + 
               "{{/employees}}</ul>";

小提示 #

如果你的Mustache版本比较旧，可能只支持../这种写法，建议先确认一下你使用的版本哦。

内容的提问来源于stack exchange，提问作者Shahar Shokrani