Question

我在这里隔离问题并创建一个简单的案例。它基本上是一个Image Accordion（基于CSS3动画），为了使用这个插件，我的HTML结构必须嵌套，如下所示。在他们的示例中，HTML是硬编码的 - 我需要使用JSON数据来生成输出。

假设一个像这样的对象，

[{imageurl:"link1"}, {imageurl: "link2"}, {imageurl: "link3"}]

我希望输出为

<figure>
    <img src="link1" />
    <figure>
        <img src="link2" />
        <figure>
           <img src="link3 />
        </figure>
    </figure>
 </figure>

我正在考虑哪种模板可以帮助实现这一目标？

Answer 1

因为Mustache语言是＆＃34;逻辑少＆＃34;，需要逻辑或复杂嵌套的视图可能需要分解为不同的视图，并通过partials包含或在Mustache外部创建然后重新插入。

无论如何，产生你想要的视图的一种方法是通过反转数组并从里到外工作来嵌套数字（jsfiddle）：

<!-- If your desired output is so:
<figure>
    <img src="link1">
    <figure>
        <img src="link2">
        <figure>
           <img src="link3">
        </figure>
    </figure>
 </figure>
-->
<script id="entriesTemplate" type="text/x-mustache-template">
    <figure>
        <img src="{{{imageurl}}}">
        {{{figure}}}
    </figure>
</script>

然后，您可以通过JS的一小段代码嵌套上述模板：

var figs = [
    {url: "http://placehold.it/10x10"},
    {url: "http://placehold.it/10x10"},
    {url: "http://placehold.it/10x10"}
];

var ft = document.querySelector('#entriesTemplate').innerText.trim();
Mustache.parse(ft);

console.log(
    figs.slice(0) // Make a copy of the array as the next call to `.reverse()` will work in situ
        .reverse()
        .reduce(function (previous, current, index, array) {
            return fig = Mustache.render(ft, {
                imageurl: current.url,
                figure: previous
            });
        }, undefined)
);

当您将undefined传递给第一个模板渲染时，Mustache将不会生成嵌套的数字。每个后续渲染都将输出从过去传递到外部图形等。您可以根据需要插入HTML块，而不是记录该值。

小胡子平面阵列成嵌套元素

1 个答案: