javascript - Mustache 平面数组到嵌套元素中

Question

我正在隔离问题并在此处创建一个简单的案例。它基本上是一个图像 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 语言是“无逻辑”的，因此需要逻辑或复杂嵌套的 View 可能需要分解为不同的 View 并通过部分 View 包含或在 Mustache 外部创建然后重新插入。

无论如何，产生您想要的 View 的一种方法是反转数组并从内到外嵌套数字( 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 block ，而不是记录值。