错误:Handlebars.js中缺少Helper

Error: Missing Helper in Handlebars.js

本文关键字：Helper js Handlebars 错误      更新时间：2023-09-26

我使用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>

理想情况下，我想有一个单独的文件helper .js的帮助，但我不知道如何让车把识别它。

编辑:

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

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

似乎不可能在模板本身中包含helper函数。

我明白了…这些帮助程序确实需要在节点应用程序文件中注册，如下所示:

// 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);

我希望这些信息更容易获得，但它在那里。

注册数学车把并执行所有数学运算

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}}

您不需要添加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');返回的对象不是一个"真正的"把手对象。所以你不能依赖一些函数，相反，你必须通过一个配置对象传递的东西，如帮助.create()函数

我们可以通过css counter property:

来解决这个问题

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>

您可以将helper粘贴到单独的文件中，就像您所说的"helper.js"一样，并在导入Handlebars JS文件后将其包含在HTML页面中。

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

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

我的一个朋友也建议这样做，而且很有效!

<h2>Success!</h2>
{{#each data}}
 <div>
    Name: {{ LocalizedName }}<br>
    Rank: {{ Rank }}<br>
 </div> 
 {{/each}}
相关文章：