【问题标题】:Express JS : Handlebars "each" tag not displaying contentExpress JS:车把“每个”标签不显示内容
【发布时间】:2020-03-28 17:31:29
【问题描述】:

我正在使用 Express JS 和 Handlebars 包,实际上我遇到了一些奇怪的事情。我不知道我是否遗漏了什么,我希望如此,但我无法弄清楚我的代码有什么问题。

我正在使用:https://github.com/ericf/express-handlebars

我无法在我的代码中使用 {{#each}} 语句。

这是我所拥有的:

views.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

app.ts

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

home.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>

其实foo显示在html代码的最后一个h6上,表示加载了helper。

但是each 语句没有为bar 显示任何内容。

关注文档:https://handlebarsjs.com/guide/builtin-helpers.html

我看不出有什么问题:/

非常感谢您的帮助,我还在学习中! :)

完整代码在这里:https://github.com/Brawcks/twiice-ts/

【问题讨论】:

    标签: javascript node.js typescript express handlebars.js


    【解决方案1】:

    您没有正确使用 bar 助手。

    Handlebars helpers 是函数。当您想在模板中使用帮助器时,可以在 Handlebars 表达式中使用它,例如 {{uppercase firstName}}。在这个表达式中,uppercase 是我们定义的助手的标识符,firstName 是我们数据上下文对象中的一个变量,它将被传递给我们的 uppercase 助手。

    表达式{{#each bar}} 告诉车把调用数据上下文对象中变量bar 上的built-in #each block helper

    但是,bar 不存在于数据上下文对象中,因为bar 不是我们数据的一部分,而是我们定义的不同助手。所以我们的问题是:我们如何在同一个 Handlebars 表达式中调用两个助手?

    Handlebars 有这个问题的答案;它是Sub-expressions。它所需要的只是将您的内部表达式括在括号中。

    这意味着将您的代码更新为 {{#each (bar)}} 就足以告诉 Handlebars bar 是我们想要调用的助手,我们想要将其返回值传递给 #each

    我创建了一个fiddle 供您参考。

    【讨论】:

    • 您好!感谢您的编辑,我正在尽力用英语,但我仍然会出错。但是真的谢谢你的回答,这对我来说真的很清楚并且可以理解!我已经编辑了我的代码,它现在工作得很好。我不明白助手是如何工作的,现在对我来说很有意义。非常感谢!
    • @VincentCfn:感谢您的友好回复。我很高兴能帮上忙。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-02-05
    • 1970-01-01
    • 2015-05-18
    • 1970-01-01
    • 1970-01-01
    • 2018-09-09
    • 1970-01-01
    相关资源
    最近更新 更多