javascript - res.render 中的 Express-Node JS Handlebars 模板 : How to iterate?

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 也有一种迭代方法。