如何对小胡子块进行故障排除？答案

【问题标题】：How do I troubleshoot mustache blocks?如何对小胡子块进行故障排除？
【发布时间】：2012-04-25 11:15:20
【问题描述】：

我试图在我的项目中使用 handlebars，但在输出每个对象的属性时遇到了麻烦。

数据

people: [{"name":"Moe"}, {"name":"Larry"}, {"name":"Curly"}]

模板

{{#people}} Name: {{name}} <br/>{{/people}}

输出

Name: 
Name: 
Name:

它显然会读取人员列表，因为它输出了 3 次。但我不知道为什么它看不到name 的简单路径。

如果我输入{{this.name}}，它也会呈现一个空白。
如果我输入{{this}}，我会看到[object Object]。

我如何记录或调查此对象，以便知道为什么不呈现 name 属性？

【问题讨论】：

标签： templates templating handlebars.js mustache

【解决方案1】：

试试{{#each people}} Name: {{name}} <br/>{{/each}}

【讨论】：

不幸的是，我确实尝试了相同的结果。不过，谢谢。
如何将数据传递到模板中？例如template(people) 不会工作，但template({people:people}) 可能会
现在仔细查看了您的数据集，您有一个包含 3 个相同键名的哈希，因此它们只是相互覆盖。我假设您的意思确实有一个列表，如下所示： people: [{"name":"Moe"}, {"name":"Larry"}, {"name":"Curly" }] 或者，也许更简单的是：people: ["Moe","Larry","Curly"]
感谢您发现我的错字。它实际上是您列出的第一个示例。我已经相应地更新了我的问题。

【解决方案2】：

你的其余代码一定有问题，在这个小提琴中它可以工作：

http://jsfiddle.net/hDE3P/

var context = {
   people : [{"name":"Moe"}, {"name":"Larry"}, {"name":"Curly"}] 
} 
var source   = $("#entry").text();
var template = Handlebars.compile(source);
$("#out").html( template(context) );

用这个html

<script id="entry" type="text/x-handlebars-template">
    {{#people}} Name: {{name}} <br/>{{/people}}
</script>

output:  
<div id="out"></div>

试试这些：

在调试器（Firebug 或其他）中检查您的数据模型
检查您的模板是否正确（如果不在脚本标签中，有时浏览器会破坏它）
调试到 Handlebars“每个”处理程序以查看上下文是什么样的

希望这会有所帮助。

【讨论】：