【问题标题】:Accessing outer array values from inner array in Mustache.js / ICanHaz从 Mustache.js / ICanHaz 中的内部数组访问外部数组值
【发布时间】:2026-01-22 21:50:01
【问题描述】:

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

【问题讨论】:

    标签: javascript json mustache icanhaz.js


    【解决方案1】:

    那是有效的小胡子。问题很可能出在您的库版本中。

    ICanHaz 附带 Mustache.js v0.4.0。当前版本(八个版本和 16 个月后)是 0.7.2。切换到ICanHaz-no-mustache.js,带上你自己的小胡子。那应该可以解决它。

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

    【讨论】:

    • 不开玩笑!你是对的,它确实与 ICanHaz-no-mustache 和最新版本的 Mustache.js 一起使用。很好的提示,感谢您的帮助:)
    【解决方案2】:

    我不熟悉你的模板,但是类似的东西呢:

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

    如果这不起作用,我深表歉意,看来我很有可能只是在扼杀语法。 :)

    【讨论】:

    • 感谢您的尝试 :) 您的语法很好,但是当我需要为每个内部数组创建一个列表项时,结果会为每个外部数组生成一个列表项。