Javascript 将Mustache平面数组放入嵌套元素中

我正在隔离这个问题，并在这里创建一个简单的案例。它基本上是一个图像手风琴（基于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>

---

我在想什么样的模板可以帮助实现这一点？

因为Mustache语言是“无逻辑”的，需要逻辑或复杂嵌套的视图可能需要分解成不同的视图，并通过局部包含，或者在Mustache之外创建，然后重新插入

无论如何，产生您想要的视图的一种方法是反转数组并从内到外嵌套图形（）：

---

将

undefined

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

纯javascript解决方案不需要使用胡子模板就可以吗？啊，我希望我可以让胡子来做这件事，所以您的意思是说在胡子中不可能？不，我不是这个意思。我以前从未使用过小胡子，它看起来非常简单，javascript可以轻松处理。这不是一个解决方案，因为它不使用胡须，但下面是我使用javascript时想到的方法：。不过，最好还是等一个留胡子的人来回答。编辑：哎呀。忘了保存更改以修复树结构。有趣的是，我在源代码的末尾发现了一个空元素，请审阅。。。我忘了保存它。我也注意到了。我更新了我的评论似乎很酷，我没有进入第一节。。。模板，我们能把这个放在标签里然后调用parse吗it@user2727195我不知道你是什么意思？是的，你可以像对待任何其他模板一样对待模板。我正在编辑第1节来描述，请编辑答案accordingly@user2727195我更新了答案，以澄清是的，您可以将模板放入

脚本

标记中。请注意，链接中有一个模板示例。

<!-- 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>

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