如何解决在 Nunjucks & Fractal 中渲染另一个组件内的组件
我正在研究一个设计系统,只是想了解组件的思维方式。
我们正在使用 Nunjucks 和 Fractal。
我们有一个现有的组件,一个从 JSON 对象获取数据的手风琴。道具是标题和内容。
我构建了一个组件,如目录,它显示样式链接列表,使用一个简单的循环,从 ToC.config.js 文件中提取。
我需要在手风琴组件中包含这个新组件,ToC 有一个标题和一个数组,其中包含每个链接的 url 和文本。
目前我刚刚从 Fractal 中的手风琴视图中复制了 HTML,但这可能不是要走的路,但从视觉上看,这是设计师的要求。
如果我将所有链接、HTML 和所有内容作为字符串放在配置中,我也可以正确呈现手风琴,但这也不是它应该工作的方式。
我想要做的,这可能是正确的方法,就是将手风琴拉入并用我的 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 %}
然后我会有我的手风琴组件,它的标题、链接和 HTML 等来自我的 ToC 组件。对不起,上面的粗略伪,它更像是我想做的一个例子。我无法将代码复制到外部资源。
使用 render 似乎不是要走的路,除非我遗漏了什么?我无法将列表作为字符串传递,因为它具有当前页面的类和 aria 等,内容作者将使用这些来构建页面。
朝正确的方向稍微推动一下会很棒。
解决方法
您可以添加类似于 render
和 include
的 macro
过滤器。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。