在Nunjucks和Fractal中渲染一个组件内部的另一个组件

Question

我正在从事一个设计系统的工作，只是让我的头脑围绕组件的思维方式。

我们使用Nunjucks和Fractal

我们有一个现有的组件，一个accordion，它从一个JSON对象获取数据。道具是标题和内容。

我已经构建了一个组件，比如目录，它使用一个简单的循环，从一个ToC.config.js文件中拉入，显示一个带样式的链接列表。

我需要在accordion组件中包含这个新组件，ToC有一个标题和一个数组，其中包含每个链接的urls和文本。

目前，我刚刚在Fractal中复制了accordion视图中的HTML，但这可能不是可行的方法，但从视觉上讲，这是设计者所需要的。

如果我把所有的链接，HTML和所有的东西放在配置中，作为一个字符串，我也可以正确地呈现手风琴，但这也不是它应该工作的方式。

我想要做的，可能是正确的方式，就是把这个accordion放进去，并用我的ToC组件填充它。

{% render '@my-accordion', 'accordion: items' %}没有做我想做的事情，而且我似乎不知道如何实现我需要做的事情。

大概是这样的：

{% render '@my-accordion' %}
  // Pass in data from ToC, somehow
  {{ title: title }}
  {% for item in items %}
    {{ item.text etc }}
  {% endfor %} 

然后我会有我的accordion组件，它的标题、链接和超文本标记语言等都来自我的ToC组件。对于上面的粗略的伪代码，我很抱歉，它更多的是我想要做的例子。我无法将代码复制到外部资源。

使用render似乎不太合适，除非我遗漏了什么？我不能将列表作为字符串传递，因为它有当前页面的类和唱段等，内容作者将使用这些来构建页面。

在正确的方向上稍微推动一下就好了。

Answer 1

您可以添加类似于include和macro的render-filter。

import 'nunjucks.min.js';

var env = new nunjucks.Environment({autoescape: true});

env.addFilter('render', function (template, ctx) {
    const html = env.render(template, ctx); // try-catch
    return env.filters.safe(html);
});

用法

// table.njk
<table>
{% for e in rows %}
    {% 'row.njk' | render({row: e}) %}
{% endfor %}
</table>

// row.njk
<tr>
    {% for c in row.cols %}
        <td> {{ c.name }} </td>
    {% endfor %}
</tr>