![](/img/trans.png)
[英]Using #each to display some data in handlebars.js not displaying
[英]Express JS : Handlebars "each" tag not displaying content
我正在使用 Express JS 和 Handlebars 包,但实际上我遇到了一些奇怪的事情。 我不知道我是否错过了什么,我希望如此,但我无法弄清楚我的代码有什么问题。
我正在使用: https : //github.com/ericf/express-handlebars
我无法在我的代码中使用{{#each}}
语句。
这是我所拥有的:
视图.ts
const Views = {
config: {
// views template configuration
extname: '.hbs',
helpers: {
modulesList: () => {
return appModules.modulesList();
},
foo: () => { return 'FOO!'; },
bar: ['tic', 'tac', 'toe'],
// bar: () => { return ['tic', 'tac', 'toe'] },
}
},
}
// Views is exported
应用程序
const exphbs = require('express-handlebars');
const views = require('twiice/views.ts');
app.engine('.hbs', exphbs(views.config));
app.set('view engine', '.hbs');
app.set('views', './twiice/views');
主页.hbs
<div class="col">
{{#each bar}}
<h6 class="text-light text-uppercase ls-1 mb-1">{{foo}}</h6>
{{/each}}
<h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
<h5 class="h3 text-white mb-0">Sales value</h5>
<h6 class="text-light text-uppercase ls-1 mb-1">{{foo}}</h6>
</div>
实际上,html 代码中最后一个h6上显示了foo
,这意味着帮助程序已加载。
但是each
语句没有为bar
显示任何内容。
按照文档: https : //handlebarsjs.com/guide/builtin-helpers.html
我看不出有什么问题:/
非常感谢您的帮助,我还在学习中! :)
完整代码在这里: https : //github.com/Brawcks/twiice-ts/
您没有正确使用bar
helper。
把手助手是函数。 当您想在模板中使用帮助器时,您可以在 Handlebars 表达式中使用它,例如{{uppercase firstName}}
。 在这个表达式中, uppercase
是我们定义的 helper 的标识符, firstName
是我们数据上下文 Object 中的一个变量,它将被传递给我们的uppercase
helper。
表达式{{#each bar}}
告诉handlebars 调用数据上下文对象中变量bar
上的内置#each 块助手。
但是, bar
并不存在于数据上下文对象中,因为bar
不是我们数据的一部分,而是我们定义的不同帮助器。 所以我们的问题是:我们如何在同一个 Handlebars 表达式中调用两个助手?
Handlebars 对这个问题有一个答案; 它是 子表达式。 它所需要的只是将您的内部表达式括在括号中。
这意味着将您的代码更新为{{#each (bar)}}
将足以告诉 Handlebars bar
是我们想要调用的助手,并且我们想要将其返回值传递给#each
。
我已经创建了一个小提琴供您参考。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.