错误：Handlebars.js 中缺少 Helper

Question

我正在使用带有 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); 

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

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

我希望这些信息更容易访问，但它确实存在。

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

Answer 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');返回的对象require('express-handlebars'); 不是“真正的”车把对象。 因此，您不能依赖某些函数，而必须通过配置对象将助手之类的东西传递给.create()函数

Answer 4

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

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

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

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

Answer 6

我的一个朋友也提出了这个建议，它奏效了！

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