assemble.io partial 将数据传递给嵌套的 partials

Question

我正在使用 assemble.io，我想使用 "atomic design" 原则对所有内容进行模块化。

假设我从几个单个原子开始

原子部分 "title" (a-h2-title.html)

<h2 class="{{additionalclasses}}">{{title}}</h2>

原子部分 "info text" (a-info-text.html)

<div class="info {{additionalclasses}}">
   {{{text}}}
</div>

据我所知，如果我想将这些通用组件的 "instances" 与一些数据一起使用，我可以在 json 文件中定义它们，如本例所示：

info-text-example1.html

{{>a-info-text info-text-example1}}

info-text-example1.json

{
   "text":"<p>some text</p>",
   "additionalclasses"="info--modified"
}

好的，现在我的问题是当我想定义一个分子时：

m-text-and-title.html

<div class="box {{additionalclasses}}">
  {{>a-h2-title}}
  {{>a-info-text}}
</div>

现在，如果我想要此元素的 "instance"

text-and-title-example1.html

{{>m-text-and-title ???}}

如何为 object 本身（附加类）和定义 child object 的所有数据？我希望我已经说清楚了

我已经在这里看到这个 article 但我无法根据我的情况调整它谢谢你的回答

Answer 1

您仍然需要以您需要的方式创建数据结构，然后在页面或部分中将值传递给 sub-partials。所以在这种情况下，我认为你可以使用以下模式：

text-and-title-example1.html

{{>m-text-and-title text-and-title-example1}}

text-and-title-example1.json

{
  "additionalclasses": "text-and-title--modified",
  "title-example": {
    "title": "some title",
    "additionalclasses": "title-modified"
  },
  "text-example": {
    "text": "<p>some text</p>",
    "additionalclasses": "info--modified"
  }
}

然后将分子更新为：

<div class="box {{additionalclasses}}">
  {{>a-h2-title title-example}}
  {{>a-info-text text-example}}
</div>

现在这与您最初的示例的工作方式相同。您有一个数据 object，其中包含您指定的属性，然后将这些属性传递给将使用它们的部分。 "atoms" 已经具有通用的、可重用的属性，您可以更改 "molecule" 来做同样的事情...比如将 title-example 更改为 title 并将 text-example 更改为 text，但将它们保留为传递给 "atoms".

的 object

assemble.io partial 将数据传递给嵌套的 partials

assemble.io partial pass data to nested partials

json

handlebars.js

templating

assemble

atomic-design