用不同的数据多次渲染一个小胡子答案

【问题标题】：Rendering one mustache partial multiple times with different data用不同的数据多次渲染一个小胡子
【发布时间】：2012-02-22 16:55:06
【问题描述】：

我有两个要并排渲染的对象。从来没有我想要渲染更多或少于两个的情况。我的模型是这样设置的：

{
  obj1: {...},
  obj2: {...}
}

使用 mustache 模板，我想使用相同的部分渲染每个对象：

<div>
  <h1>Object 1</h1>
  {{>objPartial}}
</div>
<div>
  <h1>Object 2</h1>
  {{>objPartial}}
</div>

但是，mustache 似乎不支持将上下文传递给局部。做类似{{>objPartial obj1}} 的事情似乎应该得到支持，但我找不到任何关于为部分设置上下文的文档。

支持这种东西吗？如果没有，如何在不复制部分（objPartial1 和objPartial2）的情况下达到相同的效果？

【问题讨论】：

标签： javascript partial-views mustache

【解决方案1】：

我认为您正在寻找的语法不是{{>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/

【讨论】：

虽然我已经从这个问题上移开了，这个答案确实是正确的。谢谢道格鱼！

【解决方案2】：

您可以调整您的模型以包含 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>

See it on jsFiddle

【讨论】：