[英]Error: Missing Helper in Handlebars.js
I am using handlebars.js templates with node and express.我正在使用带有 node 和 express 的 handlebars.js 模板。 I am making a numbered list using the
{{@index}}
template tag, however since index starts at 0 and I want to start from one, it seems I need to use a custom helper.我正在使用
{{@index}}
模板标签制作一个编号列表,但是由于索引从 0 开始并且我想从 1 开始,看来我需要使用自定义帮助程序。 I've seen plenty of posts regarding this and I've found the following code:我看过很多关于这个的帖子,我找到了以下代码:
Handlebars.registerHelper("inc", function(value, options)
{
return parseInt(value) + 1;
});
{{#each score}}
<li class="list-group-item">
<div id="place"> {{inc @index}}   </div>
<div class="wordOrName">{{ player_name }}</div>
<div class="number">{{ score }}</div></li>
{{/each}}
What I cannot seem to find is where the helper register function is supposed to go.我似乎无法找到帮助程序注册功能应该去的地方。 I've tried putting it inside in the template itself and in various other places but I still keep getting
我试过把它放在模板本身和其他各种地方,但我仍然不断得到
Error: Missing helper: "inc"
at model.<anonymous>
Ideally I'd like to have the helper in a separate file helpers.js but I don't have the slightest idea of how to get handlebars to recognize it.理想情况下,我希望在一个单独的文件 helpers.js 中有帮助程序,但我对如何让把手识别它一无所知。
EDIT:编辑:
Handlebars is included in the project with the following code inside the node file index.js: Handlebars 包含在项目中,节点文件 index.js 中包含以下代码:
// view engine
app.set('views', __dirname + '/views/');
app.set('view engine', 'handlebars');
app.engine('handlebars', engines.handlebars);
It appears impossible to include the helper function within the template itself.在模板本身中包含辅助函数似乎是不可能的。
I figured it out...The helpers indeed need to be registered in the node app file like so:我想通了......助手确实需要在节点应用程序文件中注册,如下所示:
// 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);
I wish this info was more easily accessible, but there it is.我希望这些信息更容易访问,但它确实存在。
Register a math handlebar and perform all mathematical operations.注册一个数学把手并执行所有数学运算。
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');
Then you can directly perform operation in your view.然后你就可以直接在你的视图中进行操作了。
{{#each myArray}}
<span>{{math @index "+" 1}}</span>
{{/each}}
You don't need to add require('handlebars')
just to get helpers working.您不需要添加
require('handlebars')
来让助手工作。 You can stick to express-handlebars.您可以坚持使用快速车把。 Define helpers in a config object like so
var myConfig = { helpers: {x: function() {return "x";}} }
and pass it to the express-handlebars-object like so: require('express-handlebars').create({myConfig})
像这样在配置对象中定义助手
var myConfig = { helpers: {x: function() {return "x";}} }
并将其传递给 express-handlebars-object,如下所示: require('express-handlebars').create({myConfig})
Here's a fully functional example with some helpers and some view directories configured.这是一个功能齐全的示例,其中配置了一些帮助程序和一些视图目录。
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'));
My understanding is that the object returned from require('express-handlebars');
我的理解是从
require('express-handlebars');
返回的对象require('express-handlebars');
is not a "real" handlebars object.不是“真正的”车把对象。 So you can't rely on some functions, and instead you have to pass stuff like helpers via a config object to the
.create()
function因此,您不能依赖某些函数,而必须通过配置对象将助手之类的东西传递给
.create()
函数
You could just paste the helpers inside a separate file, as you said something like "helper.js" and include it in your HTML page after you had imported Handlebars JS file.您可以将助手粘贴到一个单独的文件中,就像您所说的“helper.js”一样,并在您导入 Handlebars JS 文件后将其包含在您的 HTML 页面中。
<script src="handlebars.min.js"></script>
<script src="helper.js"></script>
You can also check out Swag ( https://github.com/elving/swag ) It contains a lot of helpful handlebar helpers.您还可以查看 Swag ( https://github.com/elving/swag ) 它包含很多有用的车把助手。
We can fix this issue with css counter
property:我们可以使用 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>
A friend of mine suggested this as well, and it worked!我的一个朋友也提出了这个建议,它奏效了!
<h2>Success!</h2>
{{#each data}}
<div>
Name: {{ LocalizedName }}<br>
Rank: {{ Rank }}<br>
</div>
{{/each}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.