javascript - 在 Mustache.js/ICanHaz 中从内部数组访问外部数组值

Question

我有以下 JSON，本质上是一个外部对象数组 (Outer)，每个对象都可能包含一个内部对象数组 (Inner):

{ "Outer": [{"OuterName": "OuterName1",
             "Inner": [{"InnerName": "InnerName1"}, 
                       {"InnerName": "InnerName2"}]
            },
            {"OuterName": "OuterName2",
             "Inner": [{"InnerName": "InnerName3"}, 
                       {"InnerName": "InnerName4"}]
            }]
}

我有一个构建无序列表的 ICanHaz 模板。每个 Inner 数组中的每个对象都必须有一个列表项。

<script type="text/html" id="tmp">
    <ul>
        {{#Outer}}
        {{#Inner}}
        <li>
            {{OuterName}} - {{InnerName}} 
        </li>
        {{/Inner}}
        {{/Outer}}
    </ul>
</script>

问题是，似乎无法从 #Inner 条件中引用 OuterName。因此输出看起来像这样:

 - InnerName1
 - InnerName2
 - InnerName3
 - InnerName4

当我期待时:

OuterName1 - InnerName1
OuterName1 - InnerName2
OuterName2 - InnerName3
OuterName2 - InnerName4

有谁知道我该如何解决这个问题？或者我是否只需要重组我的 JSON 以便 Inner 数组也包含 OuterName？

Answer 1

这是有效的 mustache 。问题很可能出在您的库版本中。

ICanHaz 附带 Mustache.js v0.4.0。当前版本——八个版本，十六个月后——是 0.7.2。切换到 ICanHaz-no-mustache.js，并带上你自己的 mustache 。这应该可以解决问题。

Here's a fiddle使用最新版本的 Mustache.js 的模板:

var tpl  = $('#tpl').html();

var data = { "Outer": [{"OuterName": "OuterName1",
             "Inner": [{"InnerName": "InnerName1"}, 
                       {"InnerName": "InnerName2"}]
            },
            {"OuterName": "OuterName2",
             "Inner": [{"InnerName": "InnerName3"}, 
                       {"InnerName": "InnerName4"}]
            }]
};

$('#output').html(Mustache.to_html(tpl, data));