给定一个对象数组，我想使用嵌套对象的一个属性来查找 Handlebars 中关联对象的各种属性。
在此示例中，我想显示每所大学的学生列表，以及每个学生所属院系的信息。
我的代码有效，但嵌套查找非常重复：
{{lookup (lookup ../majors major) 'dean'}}
{{lookup (lookup ../majors major) 'location'}}
我能做些什么吗？我想访问查找的上下文，如下所示：
{{#lookup ../majors major}}
{{dean}}
{{location}}
{{/lookup}}
var source = $("#hb-template").html();
var template = Handlebars.compile(source);
var html = template(context);
$("#hb-html").html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script id="hb-template" type="text/x-handlebars-template">
{{#universities}}
<h1>{{name}}</h1>
{{#students}}
<h2>{{name}}</h2>
<dl>
<dt>Major</dt>
<dd>{{major}}</dd>
<dt>Department dean</dt>
<dd>{{lookup (lookup ../majors major) 'dean'}}</dd>
<dt>Department location</dt>
<dd>{{lookup (lookup ../majors major) 'location'}}</dd>
</dl>
{{/students}}
{{/universities}}
</script>
<div id="hb-html">
</div>
<script>
var context = {
"universities": [{
"name": "Example University",
"students": [{
"name": "Alice",
"major": "Business"
},
{
"name": "John",
"major": "English"
}
],
"majors": {
"English": {
"dean": "Dr. Smith",
"location": "Room 101"
},
"Business": {
"dean": "Dr. Jones",
"location": "Room 999"
}
}
},
{
"name": "Another University",
"students": [{
"name": "Bob",
"major": "Business"
}],
"majors": {
"Business": {
"dean": "Dr. Zimmerman",
"location": "South Campus"
}
}
}
]
};
</script>
这是我的解决方案：使用{{#with}} helper http://handlebarsjs.com/builtin_helpers.html#with并将查找子表达式的结果传递给它——一个对象。我不确定这是否是最好的方法，或者到底为什么它有效，所以希望得到评论。
{{#with (lookup ../majors major)}}
<dt>Department dean</dt>
<dd>{{dean}}</dd>
<dt>Department location</dt>
<dd>{{location}}</dd>
{{/with}}
完整示例：
var source = $("#hb-template").html();
var template = Handlebars.compile(source);
var html = template(context);
$("#hb-html").html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script id="hb-template" type="text/x-handlebars-template">
{{#universities}}
<h1>{{name}}</h1>
{{#students}}
<h2>{{name}}</h2>
<dl>
<dt>Major</dt>
<dd>{{major}}</dd>
{{#with (lookup ../majors major)}}
<dt>Department dean</dt>
<dd>{{dean}}</dd>
<dt>Department location</dt>
<dd>{{location}}</dd>
{{/with}}
</dl>
{{/students}}
{{/universities}}
</script>
<div id="hb-html">
</div>
<script>
var context = {
"universities": [{
"name": "Example University",
"students": [{
"name": "Alice",
"major": "Business"
},
{
"name": "John",
"major": "English"
}
],
"majors": {
"English": {
"dean": "Dr. Smith",
"location": "Room 101"
},
"Business": {
"dean": "Dr. Jones",
"location": "Room 999"
}
}
},
{
"name": "Another University",
"students": [{
"name": "Bob",
"major": "Business"
}],
"majors": {
"Business": {
"dean": "Dr. Zimmerman",
"location": "South Campus"
}
}
}
]
};
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
