我想要并排呈现两个对象。从来没有我想要渲染更多或少于两个的情况。我的模型设置如下:
{
obj1: {...},
obj2: {...}
}
使用小胡子模板,我想使用相同的部分渲染每个对象:
<div>
<h1>Object 1</h1>
{{>objPartial}}
</div>
<div>
<h1>Object 2</h1>
{{>objPartial}}
</div>
但是,小胡子似乎不支持将上下文传递给partial。像{{>objPartial obj1}}
这样的事情似乎应该得到支持,但我找不到任何关于为部分设置上下文的文档。
支持这种事吗?如果没有,如何在不重复部分(objPartial1
和objPartial2
)的情况下实现相同的效果?
答案 0 :(得分:9)
我认为您正在寻找的语法不是{{>objPartial obj1}}
,而应该是
{{#obj1}}
{{>objPartial}}
{{/obj1}}
{{#}}
的语法不仅适用于数组 - 对于非数组对象,该对象也成为当前范围的一部分。
我已经分叉了maxbeatty的示例并对其进行了修改以显示此语法:
<script type="template/text" id="partial">
<ul>
{{#name}}
<li>{{.}}</li>
{{/name}}
</ul>
</script>
<script type="template/text" id="main">
<div>
<h1>Stooges</h1>
{{#object1}}
{{>objPartial}}
{{/object1}}
</div>
<div>
<h1>Musketeers</h1>
{{#object2}}
{{>objPartial}}
{{/object2}}
</div>
</script>
<script type="text/javascript">
var partial = $('#partial').html(),
main = $('#main').html(),
data = {
object1: {
name: ["Curly", "Moe", "Larry"]},
object2: {
name: ["Athos", "Porthos", "Aramis", "D'Artagnan"]}
},
html = Mustache.to_html(main,data, {
"objPartial": partial
});
document.write(html);
</script>
链接到jsfiddle:http://jsfiddle.net/YW5zF/3/
答案 1 :(得分:1)
您可以调整模型以包含h1
和div
,这样您就可以遍历每次向objPartial
发送不同数据的列表
<script type="template/text" id="partial">
<ul>
{{#name}}
<li>{{.}}</li>
{{/name}}
</ul>
</script>
<script type="template/text" id="main">
{{#section}}
<div>
<h1>{{title}}</h1>
{{>objPartial}}
</div>
{{/section}}
</script>
<script type="text/javascript">
var partial = $('#partial').html(),
main = $('#main').html(),
data = {
section: [
{
title: "Object 1",
name: ["Curly", "Moe", "Larry"]},
{
title: "Object 2",
name: ["Athos", "Porthos", "Aramis", "D'Artagnan"]}
]
},
html = Mustache.to_html(main,data, {
"objPartial": partial
});
document.write(html);
</script>