0

假设我有以下模板/场景：

{{partial-container container}}

{{{content.html}}}

{{#each content.partials}}
  {{this}} // <-- here I'd like to render partials that users requested.
{{/each}}

目标

  • [完成]我想使用 html 属性呈现一个文本块，经过 html 转义。
  • 从 JSON 中，我们还获得了要渲染的“部分”列表，但我不知道如何使这项工作。

理想情况下，语法应该是这样的：

{{partial-container container}}

{{{content.html}}}

{{#each content.partials}}
  {{ > {{this}} }}
{{/each}}

但这会引发语法错误。有没有办法将变量的内容解释为要渲染的部分名称（并这样做）？

4

1 回答 1

1

我假设您的“部分列表”是与已注册部分匹配的名称数组。就像是：

"partials": ["fooPartial", "barPartial", "fooPartial"]

Handlebars 文档指出，可以使用子表达式动态选择部分，但此子表达式必须是返回部分名称的函数。这意味着像 as 那样简单的东西{{> (this)}}不会起作用，因为 ourthis是部分名称的字符串值，而不是函数。

我看到了实现我们目标的两种方法。

选项 1：将部分名称映射到函数

如果我们能够修改发送到模板的数据，我们可以将部分名称映射到返回名称的函数中：

"partials": ["fooPartial", "barPartial", "fooPartial"].map(partialName => () => partialName)

这些函数将允许我们动态地将我们的部分插入到我们的模板中{{> (this)}}。

有关示例，请参见此小提琴。

选项 2：使用查找助手

如果不能修改我们的输入数据，我们可以使用 Handlebars 内置的查找助手。这里的技巧是，在我们的#each循环中，我们必须提升上下文级别来获取我们的partials数组，然后使用@index辅助变量来获取当前索引处的部分名称。模板将变为：

{{#each content.partials}}
  {{> (lookup ../content.partials @index)}}
{{/each}}

有关示例，请参见此小提琴。

于 2021-10-15T22:08:55.680 回答