错误：Handlebars.js 中缺少帮助程序

Posted 2023-02-22

【中文标题】错误：Handlebars.js 中缺少帮助程序

【英文标题】：Error: Missing Helper in Handlebars.js

【发布时间】：2016-01-08 15:19:03

【问题描述】：

我正在使用带有 node 和 express 的 handlebars.js 模板。我正在使用@index 模板标签制作一个编号列表，但是由于索引从 0 开始并且我想从 1 开始，看来我需要使用自定义助手。我看过很多关于这个的帖子，我发现了以下代码：

Handlebars.registerHelper("inc", function(value, options)

    return parseInt(value) + 1;
);

#each score
      <li class="list-group-item">
      <div id="place"> inc @index &nbsp </div>
      <div class="wordOrName"> player_name </div>
           <div class="number"> score </div></li>
        /each

我似乎找不到帮助注册功能应该去哪里。我试过把它放在模板本身和其他地方，但我仍然不断得到

Error: Missing helper: "inc"
   at model.<anonymous>

理想情况下，我希望将助手放在单独的文件 helpers.js 中，但我对如何让车把识别它一无所知。

编辑：

Handlebars 包含在项目中，节点文件 index.js 中包含以下代码：

// view engine
app.set('views', __dirname + '/views/');
app.set('view engine', 'handlebars');
app.engine('handlebars', engines.handlebars); 

在模板本身中包含辅助函数似乎是不可能的。

【参考方案1】：

我想通了...帮助程序确实需要像这样在节点应用程序文件中注册：

// view engine
app.set('views', __dirname + '/views/');
app.set('view engine', 'handlebars');
var hbs = require('handlebars');
hbs.registerHelper("inc", function(value, options)

    return parseInt(value) + 1;
);
app.engine('handlebars', engines.handlebars);

我希望此信息更易于访问，但确实如此。

【讨论】：

它在我的开发服务器中工作，但在生产中没有。代码相同。我尝试了上面的代码，但没有工作。

【参考方案2】：

注册一个数学把手并执行所有数学运算。

app.engine('handlebars', exphbs(
  helpers:
    // Function to do basic mathematical operation in handlebar
    math: function(lvalue, operator, rvalue) 
        lvalue = parseFloat(lvalue);
        rvalue = parseFloat(rvalue);
        return 
            "+": lvalue + rvalue,
            "-": lvalue - rvalue,
            "*": lvalue * rvalue,
            "/": lvalue / rvalue,
            "%": lvalue % rvalue
        [operator];
    
));
app.set('view engine', 'handlebars');

然后你就可以直接在你的视图中进行操作了。

    #each myArray
        <span>math @index "+" 1</span>
    /each

【讨论】：

这在使用快速车把而不是车把时有效。谢谢

或者注册 '+' (lvalue, rvalue) => parseFloat(lvalue) + parseFloat(rvalue)，如果需要，'-', '*' 和 '/' 类似，然后使用如果您不需要或不希望针对不同的数据类型使用不同的运算符实现，则将它们作为 '+' @index 1

【参考方案3】：

您无需添加 require('handlebars') 即可让助手工作。您可以坚持使用快速车把。在配置对象中定义帮助器，如 var myConfig = helpers: x: function() return "x"; 并将其传递给 express-handlebars-object，如下所示：require('express-handlebars').create(myConfig)

这是一个功能齐全的示例，其中配置了一些帮助程序和一些视图目录。

var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var hbs = exphbs.create(
    helpers: 
        test: function ()  return "Lorem ipsum" ,
        json: function (value, options) 
            return JSON.stringify(value);
        
    ,
    defaultLayout: 'main',
    partialsDir: ['views/partials/']
);
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
app.set('views', path.join(__dirname, 'views'));

我的理解是从require('express-handlebars'); 返回的对象不是“真正的”车把对象。因此，您不能依赖某些函数，而是必须通过配置对象将诸如 helpers 之类的东西传递给 .create() 函数

【参考方案4】：

您可以将帮助程序粘贴到单独的文件中，就像您所说的“helper.js”，并在您导入 Handlebars JS 文件后将其包含在您的 html 页面中。

<script src="handlebars.min.js"></script>
<script src="helper.js"></script>

您还可以查看 Swag (https://github.com/elving/swag) 它包含许多有用的车把助手。

【讨论】：

Handlebars 是在 index.js 文件中实现的，而不是在 html 脚本中。无论如何我尝试了这种方法，但我仍然得到错误

这个问题专门针对 Node/Express，而不是前端实现。

【参考方案5】：

我们可以使用 css counter 属性解决这个问题：

body 
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;


h2::before 
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: counter(my-sec-counter) ". ";

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>javascript Tutorial</h2>
<h2>Bootstrap Tutorial</h2>
<h2>SQL Tutorial</h2>
<h2>php Tutorial</h2>

【讨论】：

您能否解释一下您的代码在做什么以及它与 Handlebars.js 的关系

【参考方案6】：

我的一个朋友也提出了这个建议，并且成功了！

<h2>Success!</h2>
#each data
 <div>
    Name:  LocalizedName <br>
    Rank:  Rank <br>
 </div> 
 /each