如何将自定义帮助函数作为上下文传递给车把模板？答案

【问题标题】：How to pass custom helper function as a context to handlebars template?如何将自定义帮助函数作为上下文传递给车把模板？
【发布时间】：2021-07-31 00:17:56
【问题描述】：

我是车把新手，我想知道如何将自定义助手作为上下文传递给视图模板（如果可能的话）？案例是：我有一个包含 5 个元素的数组和一个带有 5 个标签的模板，我想按照传递数组的顺序来呈现模板。示例：如果我将数组作为 [2,1,3,4,5] 传递，那么我希望按该顺序呈现 div；这是第二个div，然后是第一个div，然后是第三个div，然后是第四个div，然后是第五个div。我将控制器文件中的辅助函数声明为

Handlebars.RegisterHelper('check',(a,b)=>{
     return a.toString()===b  
})

我的车把文件是这样的：

<html>
.
.
.
<div id='one'></div>
<div id='two'></div>
<div id='three'></div>
<div id='four'></div>
<div id='five'></div>
.
.
.
</html>

我的问题是，当我传递一个数组 [2,1,5,4,3] 时，我想按照 id 为“二”的 div 然后是 id 为“一”的 div 的顺序渲染 div，就像这样.

【问题讨论】：

我不能说我完全理解你想要做什么。但是，由于您已包含 express 标记，我假设您正在使用 Handlebars 服务器端。如果是这种情况，那么您将需要参考您正在使用的 Handlebars 视图引擎的文档以了解如何注册自定义帮助程序。例如，here 是如何为 express-handlebars 做的。

标签： javascript html express handlebars.js

【解决方案1】：

我认为，如果我对您想要实现的目标有更多的了解，那么我可能会建议另一种方法。但是，根据您提供的信息，我确实有一个建议的方法。

我认为您应该不使用帮助程序，而应为每个要定义的唯一 div 模板使用 Handlebars Partials。

然后，在您传递给模板的上下文对象中，您可以按照您想要包含它们的顺序提供您想要包含的部分名称的数组。

假设您已注册名为“一”、“二”、“三”、“四”、“五”的部分，您的数组可能看起来像 ["two", "one", "three", "four", "five"]。

然后，您的模板将遍历每个部分名称并使用Dynamic Partial 解析来包含正确的部分。

Handlebars 不允许您直接将包含名称的变量传递给动态部分分辨率，因此您需要 lookup。假设部分名称数组的标识符为partials，则生成的模板将如下所示：

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

我创建了一个fiddle 供您参考。

【讨论】：