从Mustache.js / ICanHaz中的内部数组访问外部数组值

时间:2013-05-08 17:27:01

标签: javascript json mustache icanhaz.js

我有以下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>

问题是,似乎无法在OuterName条件中引用#Inner。因此输出如下:

 - InnerName1
 - InnerName2
 - InnerName3
 - InnerName4

当我期待:

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

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

2 个答案:

答案 0 :(得分:3)

那是有效的胡子。问题最有可能发生在您的库版本中。

ICanHaz随附Mustache.js v0.4.0。目前的版本 - 八个版本和十六个月后 - 是0.7.2。切换到ICanHaz-no-mustache.js,然后带上自己的胡子。那应该解决它。

使用最新版本的Mustache.js的

Here's a fiddle模板:

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));

答案 1 :(得分:1)

我不熟悉您的模板,但是如下所示:

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

我道歉,如果这不起作用,似乎我很有可能只是在屠杀语法。 :)