I have two objects that I want to render side by side. There is never a case where I will want to render more, or less than two. My model is setup like so:
{
obj1: {...},
obj2: {...}
}
Using mustache templates, I want to render each object using the same partial:
<div>
<h1>Object 1</h1>
{{>objPartial}}
</div>
<div>
<h1>Object 2</h1>
{{>objPartial}}
</div>
However, mustache doesn't seem to support passing a context to the partial. Doing something like {{>objPartial obj1}}
seems like it should be supported, but I can't find any documentation on setting a context for a partial.
Is this sort of thing supported? If not, how can I accomplish the same effect without duplicating the partial (objPartial1
and objPartial2
)?
The syntax I think you are looking for is not {{>objPartial obj1}}
, but rather it should be
{{#obj1}}
{{>objPartial}}
{{/obj1}}
The syntax for {{#}}
isn't only for arrays - for non array objects the object becomes part of the current scope.
I've forked maxbeatty's example and modified it to show this syntax:
<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>
Link to jsfiddle: http://jsfiddle.net/YW5zF/3/