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

Accessing outer array values from inner array in Mustache.js / ICanHaz

本文关键字：数组 内部 访问 外部 Mustache js ICanHaz      更新时间：2023-09-26

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

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

ICanHaz与Mustache.js v0.4.0一起发布。目前的版本是0.7.2，已经发布了8个版本，过去了16个月。切换到ICanHaz-no-mustache.js，并带来你自己的小胡子。这应该能解决问题。

下面是你的模板在最新版本的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));

我不熟悉你的模板，但是像这样的怎么样:

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

我很抱歉，如果这不起作用，这似乎是一个很好的机会，我只是屠宰语法。:)

相关文章：