Mikado 循环遍历数据

Question

我正在尝试实现 Mikado template engine in my website, having already implemented Mustache.js，我期待一个非常简单的过渡，因为 Mikado 接缝基于它，但我不知道如何循环遍历数据中的嵌套数组。

有了Mustache.js，可不可以这样做：

{{# data.textuals_section.textuals}}
    {{textual_h}}
{{/ data.textuals_section.textuals}}

或者在Handlebars.js中，应该是这样的（没试过）：

{{#each data.textuals_section.textuals}}
    {{textual_h}}
{{/each}}

在 Mikado 中，当然不是，因为 {{# }} 保留用于传递 HTML 标记，并且文档接缝仅引用单级数组，所以我无法理解如何与 Mikado 循环，

不仅如此，在 Mikado 中，嵌套数组接缝甚至无法使用以下语法访问

{{data.textuals_section.textuals.textual_h}}

我已经设置了一些codepen，如果有人想提出解决方案。

非常感谢，贝伊！

Answer 1

您必须创建一个新模板并添加每一行。

html

<div id="root"></div>
<template id="subtext">
  <div>
    <h3>{{data.textual_h}}</h3>
    <h4>{{data.textual_sh}}</h4>
    <p>{{data.textual_p}}</p>
  </div>
</template>
<template id="basic">
  <div>
    <h1>{{data.textuals_section.textuals_h}}</h1> 
    <h2>{{data.textuals_section.textuals_sh}}</h2>
    <p>{{data.textuals_section.textuals_p}}</p>
    <div id="textuals"></div>
  </div>
</template>

javascript

const root = document.getElementById("root");
const template = Mikado.compile("basic");
const view = Mikado(root, template);
const data = [{
  textuals_section: {
    textuals_h: "A main headers",
    textuals_sh: "A main sub-headers",
    textuals_p: "A main pragraph...",
    textuals: [{
        textual_h: "A nested header1",
        textual_sh: "A nested sub-header",
        textual_p: "A nested paragraph..."
      },
      {
        textual_h: "A nested header2",
        textual_sh: "A nested sub-header",
        textual_p: "A nested paragraph..."
      },
      {
        textual_h: "A nested header3",
        textual_sh: "A nested sub-header",
        textual_p: "A nested paragraph..."
      }
    ]
  }
}];

view.render(data);

const root2 = document.getElementById("textuals");
const template2 = Mikado.compile("subtext");
const view2 = Mikado(root2, template2);

data[0].textuals_section.textuals.forEach(row => view2.add(row))
view2.render();

Mikado 循环遍历数据

Mikado loop trough data

html

javascript

templates

mustache

handlebars.js