Handlebars - #each 中的嵌套对象

Question

我将 express-handlebars 与 Node JS 一起使用，我正在尝试使用 #each 在我的 HTML 页面上显示来自数组 games 的信息。但是车把不会显示我的对象内的值。即使它不是嵌套对象。

但是如果我只写 {{this}}，它会显示所有对象，就像它是一个字符串一样。如果我这样做 {{this.time}}，则不会显示任何内容。

我正在使用 Node JS v14.18.1、express v4.17.2 和 express-handlebars v6.0.2。

提前感谢您的帮助！

    getHomePage: async (req, res) => {
        try {
            const games = await gameModel.find().sort({time: -1}).limit(3).populate('user');
            res.render('home', {title: 'Hello world', games});
        } catch (error) {
            console.error(error);
            res.status(500).json({error});
        }
    }

        <table>
            <thead>
                <th>Position</th>
                <th>Score</th>
                <th>Nom</th>
            </thead>
            <tbody>
                {{#each games}}

                    <tr>
                        <td>#{{@index}}</td>
                        <td>{{this}}</td>
                        <td>{{this.time}}</td>
                    </tr>

                {{/each}}
            </tbody>
        </table>

Answer 1

{{this.time}} 或 {{time}} 都可以，请参阅下面的输出片段，使用 {{this.team}} 和 {{time}}。

如果时间仍然没有显示任何内容，请尝试确认 games 是否按预期定义。

// shortened data for brevity
const data = {
  games: [
    {team: 'Man U', time: '10am'},
    {team: 'Arsenal', time: '1pm'}
  ]
};

//inline template for snippet simplicity
const template = '' +
'<table>' +
'<thead>' +
'<tr>'+
'<th>#</th>' +
'<th>Team Name</th>' +
'<th>Time</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'{{#each games}}' +
'<tr>' +
// BEGIN
'<td>{{@index}}</td>' +
'<td>{{this.team}}</td>' +
'<td>{{time}}</td>' +
// END
'</tr>' +
'{{/each}}' +
'</tbody>' +
'</table>';

var output = Handlebars.compile(template)(data);
console.log(output)
// for snippet simplicity
$('body').html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>

Answer 2

我认为问题出在 Handlebars 或 NodeJS 上。但它来自我的 MongoDB 请求。

我通过在 Mongo 请求末尾添加 .lean() 解决了这个问题。默认情况下，Mongo returns 一个文档，而不是一个 javascript 对象。所以我们必须将它“转换”为 javascript 以允许车把显示它：

gameModel.find().sort({time: -1}).limit(3).populate('user').lean()

Handlebars - #each 中的嵌套对象

Handlebars - Nest objects in #each

node.js

handlebars.js

express-handlebars

nested-object