时间戳

首页 > 解决方案 > 如何在自定义帮助程序块中呈现 Handlebars 变量？

handlebars.js - 如何在自定义帮助程序块中呈现 Handlebars 变量？

问题描述

我试图让两个 Handlebars 变量在我创建的自定义 Handlebars 助手中呈现。

我正在为 handlebars.js 使用 Express.js 视图引擎，并在我app.js的设置中设置了一个助手来比较相等性：

const hbs = require('hbs');

app.set('view engine', 'hbs');

hbs.registerHelper('ifEqual', (a, b, options) => {
  if (a === b) {
    return options.fn(this);
  }
  return options.inverse(this);
});

我的控制器将两个变量传递给视图：

res.render('my-view', {
  x: 3,
  y: 3,
});

如果my-view.hbs变量相等，我想渲染变量，所以我尝试了：

{{#ifEqual x y}}
  foo
  {{x}}
  {{y}}
{{/ifEqual}}

结果只是foo渲染。为什么不在{{x}}这里{{y}}渲染？我需要部分执行此操作吗？

标签： handlebars.jsexpress-handlebarshandlebarshelper

解决方案

您的模板不会呈现块中的值x或y来自ifEqual块内的值的原因是因为该块的上下文中没有x或y属性。上下文中缺少这些属性的原因非常简单：这是因为在您调用时registerHelper使用了箭头函数表达式来定义 Helper 函数。

箭头函数表达式除了更紧凑的语法外，还不同于标准函数表达式。在这种情况下，重要的区别在于它们没有自己的this上下文。

当您调用 时registerHelper，Handlebars 会将辅助回调函数绑定到模板的数据上下文，在本例中为 Object: { x: 3, y: 3 }。但是，这仅在您使用常规函数表达式作为回调而不是箭头函数表达式时才有效 - 因为箭头函数表达式不能动态绑定到不同的this上下文。

这意味着您必须使用正则函数表达式作为参数registerHelper：

hbs.registerHelper('ifEqual', function (a, b, options) {
    // Function body remains the same.
});

为了更好地了解问题所在，您可以console.log(this)在助手中使用这两种函数表达式类型并比较差异。

我创建了一个小提琴来展示差异。

推荐阅读