如何在自定义辅助块内渲染 Handlebars 变量？

Question

我正在尝试获取两个 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}} 不在这里渲染？我需要部分执行此操作吗？

Answer 1

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

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

当您调用 registerHelper 时，Handlebars 会将辅助回调函数绑定到模板的数据上下文，在本例中为对象：{ x: 3, y: 3 }.但是，只有当您使用常规函数表达式作为回调并且不使用箭头函数表达式时，这才有效 - 因为箭头函数表达式无法动态绑定到不同的<代码>此上下文。

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

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

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

我创建了一个 fiddle 来演示差异。

Answer 2

好吧，我用不同的方法做到了这一点：

hbs.registerHelper('renderVars', (a, b) => {
  let output;
  if (a === b) {
    output = `foo ${a} ${b}`;
  } else {
    output = 'foo';
  }
  return output;
});

然后在我看来：

{{#renderVars x y}}
{{/renderVars}}