Handlebars 辅助函数中未定义

Question

我有一个自定义助手，如下所示。 不知何故，传递的参数 (v1, v2, v2) 的值未定义。 任何指针都会有所帮助。

东西.js：

Handlebars.registerHelper('hasAccess', function(v1, v2, v3) {
    console.log(v1 + ', ' + v2 + ', ' + v3); //this gives undefined
    if (v1 && v2 && v3) {
        return true;
    }
    return false;   
});

和我的模板，如下：

 {{#each list1}}
    <span>{{this}}{{#if hasAccess value1 value2 value3}}<sup>display-something</sup>{{/if}}</span>
 {{/each}}

getTemplateData() {
      const value1 = true;
      let value2 = true;
      let value3 = false;
      let list1 = [10, 20, 30];
   }

我也是 UI 新手，所以任何改进代码的建议都将不胜感激。

Answer 1

您的模板有几个问题。

首先， #if需要一个参数，它将评估其真实性。 为了给出hasAccess帮助器的#if结果，我们需要使用括号使hasAccess评估成为 子表达式。

我们的模板更新为：

{{#if (hasAccess value1 value2 value3)}}<sup>display-something</sup>{{/if}}

这可以防止 Handlebars 抛出错误，但是我们的hasAccess助手的参数都具有undefined的值。 这是因为value1 、 value2和value3在我们的#each循环中对评估上下文不可用。 我们需要使用路径来访问父上下文。

现在我们的模板变成：

{{#if (hasAccess ../value1 ../value2 ../value3)}}<sup>display-something</sup>{{/if}}

注意：由于value1 、 value2和value3都属于我们的根数据上下文，我们也可以这样做：

{{#if (hasAccess @root.value1 @root.value2 @root.value3)}}<sup>display-something</sup>{{/if}}

我创建了一个小提琴供您参考。

至于代码改进的建议。 我认为if (true) { return true; } if (true) { return true; }是一种反模式，写得更简洁：

Handlebars.registerHelper('hasAccess', function(v1, v2, v3) {
  return Boolean(v1 && v2 && v3); 
});