实际上,我这样做在一个JSON对象,但对于这个问题,我将简化。 我似乎无法让我的手把模板建立正确。 下面是我在传递对象的样本数组:
var data = {
DocumentInfo: [
{
Category: "General",
DocumentList: [
{
DocumentName: "Document Name 1 - General",
DocumentLocation: "Document Location 1 - General"
},
{
DocumentName: "Document Name 2 - General",
DocumentLocation: "Document Location 2 - General"
}
]
},
{
Category: "Unit Documents",
DocumentList: [
{
DocumentName: "Document Name 1 - Unit Documents",
DocumentList: "Document Location 1 - Unit Documents"
}
]
},
{
Category: "Minutes"
}
]
};
这里是把手模板和DIV到哪里去:
<div id="DocumentResults"></div>
<script id="document-template" type="text/x-handlebars-template">
<div>
{{#if DocumentInfo}}
{{#DocumentInfo}}
{{#Category}}
<div class="row">
<div class="col-md-12">
<h2>{{this}}</h2>
{{#DocumentList}}
<p>{{DocumentName}} at {{DocumentLocation}}</p>
{{/DocumentList}}
</div>
</div>
{{/Category}}
{{/DocumentInfo}}
{{else}}
<p>There are no documents available at this time</p>
{{/if}}
</div>
</script>
最后,这里是建立车把输出JavaScript的:
var source = $.trim($("#document-template").html());
var template = Handlebars.compile(source);
var $docData = $(template(data));
$("#DocumentResults").empty().append($docData);
问题是,所生成的唯一的事情是头字段。 为什么不会它遍历我对每个类别其他阵列(DocumentList)? 而且,我可以得到头值显示的唯一方式是使用{{此}}。 如果我用{{类别}}没有显示替换它。 我看不出它是什么,我做错了这里。