调用助手（Handlebars）后无法访问数组元素答案

【问题标题】：Can't access array element after calling helper (Handlebars)调用助手（Handlebars）后无法访问数组元素
【发布时间】：2018-10-02 06:30:26
【问题描述】：

我已经在我的应用文件中注册了这个助手：

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

然后，在我的 hbs 文件上：

{{#if_greater 20 occurrences}}
     <tr class="danger">
         <td>{{this.date}}</td>
         <td>{{this.serial}}</td>
         <td>{{this.operator}}</td>
         <td>{{this.vehicle}}</td>
         <td>{{this.stop}}</td>
         <td>{{this.line}}</td>
         <td>{{this.zone}}</td>
         <td>{{this.occurrences}}</td>
         <td>{{this.encrypted}}</td>
     </tr>
{{/if_greater}}

但是，this.date 不输出任何内容，调用 date 也不输出任何内容。如果我不调用我的助手，我可以输出它。助手有什么问题？

【问题讨论】：

标签： node.js handlebars.js helper

【解决方案1】：

问题是您在hbs.registerHelper 调用中使用的是arrow function expression 而不是function expression。需要注意的是，箭头函数表达式不仅仅是编写函数表达式的一种简洁的新方法。他们的行为不同。

这种情况下的相关区别是arrow function expressions do not have their own this object。相反，它们会获得其封闭执行上下文的this。

当您使用老式函数表达式（如 hbs.registerHelper('if_greater', function (a, b, opts) { /*...*/ });）定义 Handlebars 助手时，Handlebars 会确保已执行助手中的 this 是模板中的当前上下文。来自文档：

Handlebars 始终以this 作为当前上下文调用帮助程序，因此您可以使用this 调用块来评估当前上下文中的块。

但是，当您使用箭头函数表达式时，this 来自定义函数的词法范围。 this 可以是很多东西，但它不能是你想要的模板上下文。

有关箭头函数与函数表达式的精彩总结，请参阅：https://stackoverflow.com/a/34361380/3397771

要确认您的助手在编写为非箭头函数表达式时是否按预期工作，请参阅fiddle。

【讨论】：

【解决方案2】：

如果有人遇到同样的问题，我找到了解决方法（并保留了帮助程序）。

{{#each payload as |p|}} {{#if_greater 20 occurrences}}
  <tr class="danger">
    <td>{{p.date}}</td>
    <td>{{p.serial}}</td>
    <td>{{p.operator}}</td>
    <td>{{p.vehicle}}</td>
    <td>{{p.stop}}</td>
    <td>{{p.line}}</td>
    <td>{{p.zone}}</td>
    <td>{{p.occurrences}}</td>
    <td>{{p.encrypted}}</td>
  </tr>

【讨论】：