繁体   English   中英

Express JS:把手“每个”标签不显示内容

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM