res.render 中的 Express-Node JS 车把模板：如何迭代？

Question

我有这个问题。你介意帮助我吗？

问题：数据库返回了数百行。
因此，下面的代码在“tile”中应该有数百个条目。
有没有办法自动化这样的过程？
一种创建另一个条目的方法，其中要使用的行是下一行？

一种使用循环（例如while、if else 语句或for 循环）的方法？

我在 app.js 中有这段代码：

app.get('/gallery', function (req, res,next) {

connection.query("select firstname,entryid,pictureid, surname, title, fileurl from entries LIMIT 100", function (err, rows, fields) {
    if (err)
    throw err;

    var count = rows.length;
    var i = 0;

res.render('gallery', {
                tile : 
                    [
                        {
                            firstname : [rows[i].firstname],
                            title : rows[i].title,
                            artist : rows[i].firstname + ' ' + rows[i].surname,
                            fileurl : rows[i].fileurl,
                            surname : rows[i].surname,
                            entryid :rows[i].entryid,
                            view_count : genRandNum(),
                            pictureid : rows[i].pictureid,
                        },
                        {
                            firstname : [rows[2].firstname],
                            title : rows[2].title,
                            artist : rows[2].firstname + ' ' + rows[i].surname,
                            fileurl : rows[2].fileurl,
                            surname : rows[2].surname,
                            entryid :rows[2].entryid,
                            view_count : genRandNum(),
                            pictureid : rows[2].pictureid,
                        },
                        {
                            firstname : [rows[3].firstname],
                            title : rows[3].title,
                            artist : rows[3].firstname + ' ' + rows[i].surname,
                            fileurl : rows[3].fileurl,
                            surname : rows[3].surname,
                            entryid :rows[3].entryid,
                            view_count : genRandNum(),
                            pictureid : rows[3].pictureid,
                        },
                        {
                          // .......the next row[i] should be used................
                        }
                    ]
                });
        });

我的 HTML 代码是这样的：
（它并没有真正帮助，但至少你可以掌握我想要发生的事情。
顺便说一下，这个页面是一个画廊页面。这就是为什么我有很多"tile")

{{#tile}}
        <div class="medium-4 large-4 columnGallery" >
            <div class="gallery shadow">
                <a href="/entry-details-page/{{entryid}}/{{pictureid}}" class="artist-avatar"><img src="{{fileurl}}"></a>
                <div class="artist-name">
                    <a href="/public/{{firstname}}-{{surname}}" class="username">{{artist}}</a>
                    <a href="/public" class="artist-username">{{username}}</a>
                </div>
                <span class="view-count">{{view_count}} views</span>
                <a href="/entry-details-page/{{entryid}}/{{pictureid}}" class="photo-tile-title">{{title}}</a>
                <div class="action">
                    <div data-date="2013-12-06T22:13:37.122Z" class="story-date moment fromNow">Entry: 2012</div>
                    <div class="story-tile-thumbnail"><a href="/entry-details-page/{{entryid}}/{{pictureid}}"><img src="{{fileurl}}"></a></div>
                </div>

            </div>  
        </div>
{{/tile}}

所以现在这是新的代码：

rows.forEach(function(rows) {
        tile.push({
            firstname  : rows.firstname,
            title      : rows.title,
            artist     : rows.firstname + ' ' + rows.surname,
            fileurl    : rows.fileurl,
            surname    : rows.surname,
            entryid    : rows.entryid,
            view_count : genRandNum(),
            pictureid  : rows.pictureid,
        });

        console.log(rows);
    });

    res.render('gallery', {
            tile : [rows]
        });

    console.log(tile);
     });

console.log(tile) 输出此格式中的正确代码：

[
                    {   
                        firstname : [rows[i].firstname],
                        title : rows[i].title,
                        artist : rows[i].firstname + ' ' + rows[i].surname,
                        fileurl : rows[i].fileurl,
                        surname : rows[i].surname,
                        entryid :rows[i].entryid,
                        view_count : genRandNum(),
                        pictureid : rows[i].pictureid,
                    },
                    {   
                        firstname : [rows[i].firstname],
                        title : rows[i].title,
                        artist : rows[i].firstname + ' ' + rows[i].surname,
                        fileurl : rows[i].fileurl,
                        surname : rows[i].surname,
                        entryid :rows[i].entryid,
                        view_count : genRandNum(),
                        pictureid : rows[i].pictureid,
                    },
                ]

但 HTML 页面仍然显示空白 :(

{{#each tile}}
        <div class="medium-4 large-4 columnGallery" >
            <div class="gallery shadow">
                <a href="/entry-details-page/{{entryid}}/{{pictureid}}" class="artist-avatar"><img src="{{fileurl}}"></a>
                <div class="artist-name">
                    <a href="/public/{{firstname}}-{{surname}}" class="username">{{artist}}</a>
                    <a href="/public" class="artist-username">{{username}}</a>
                </div>
                <span class="view-count">{{view_count}} views</span>
                <a href="/entry-details-page/{{entryid}}/{{pictureid}}" class="photo-tile-title">{{title}}</a>
                <div class="action">
                    <div data-date="2013-12-06T22:13:37.122Z" class="story-date moment fromNow">Entry: 2012</div>
                    <div class="story-tile-thumbnail"><a href="/entry-details-page/{{entryid}}/{{pictureid}}"><img src="{{fileurl}}"></a></div>
                </div>

            </div>  
        </div>
        {{/each}}

Answer 1

在循环中创建tile 对象数组，然后将其传递给render()

app.get('/gallery', function (req, res, next) {
    connection.query("select firstname,entryid,pictureid, surname, title, fileurl from entries LIMIT 100", function (err, rows, fields) {
        if (err) throw err;

        var tile = [];

        rows.forEach(function(row) {
            tile.push({
                firstname  : [row.firstname],
                title      : row.title,
                artist     : row.firstname + ' ' + row.surname,
                fileurl    : row.fileurl,
                surname    : row.surname,
                entryid    : row.entryid,
                view_count : genRandNum(),
                pictureid  : row.pictureid
            });
        });
        res.render('gallery', {tile});
    });
});

你可以在 HTML 中做同样的事情，我通常使用 Jade 或 EJS，但我确信 Handlebars 也有迭代的方法。