Mikado 循环波谷数据

Question

我正在尝试在我的网站中实现Mikado 模板引擎，已经实现了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 标记，并且文档接缝仅引用单个级别 arrays，所以我不明白如何使用 Mikado 制作循环，

不仅如此，在 Mikado 中，嵌套数组接缝甚至无法通过以下 sintax 访问

{{data.textuals_section.textuals.textual_h}}

如果有人想提出解决方案，我已经设置了一个小代码笔。

非常感谢，拜！

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