时间戳

首页 > 解决方案 > Express JS：车把“每个”标签不显示内容

javascript - Express JS：车把“每个”标签不显示内容

问题描述

我正在使用 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

应用程序.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');

主页.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/

标签： javascriptnode.jstypescriptexpresshandlebars.js

解决方案

您没有bar正确使用帮助程序。

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

该表达式{{#each bar}}告诉车把调用数据上下文对象中变量的内置#each 块助手。bar

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

Handlebars 有这个问题的答案；它是子表达式。它所需要的只是将您的内部表达式包装在括号中。

这意味着更新您的代码{{#each (bar)}}将足以告诉 Handlebars 这bar是我们想要调用的帮助器以及我们想要传递给它的返回值#each。

我创建了一个小提琴供您参考。

推荐阅读