res.render 中的 Express-Node JS 车把模板：如何迭代？
Posted
技术标签:
【中文标题】res.render 中的 Express-Node JS 车把模板：如何迭代？【英文标题】：Express-Node JS handlebar templating in res.render: How to iterate? 【发布时间】：2014-01-06 20:30:46 【问题描述】：我有这个问题。你介意帮助我吗？
问题：数据库返回了数百行。 因此，下面的代码在“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
【问题讨论】：
【参考方案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 也有迭代的方法。
【讨论】：
非常感谢您的快速回复！ :) 但现在似乎没有数据出现。我已经按照你说的做了。例如： row.title 好吗？我们不应该有 row[index].title 吗？？ 不，它是row.title，其中row 是循环中的当前项。 @user3094180
谢谢！现在的问题是，当我执行 console.log(row) 以查看输出的内容时，是的，有迭代，但是块之间没有逗号： firstname : [row.firstname], title : row.title,艺术家：row.firstname + ' ' + row。 ... 名字：[row.firstname]，标题：row.title，艺术家：row.firstname + ' ' + row。 ...
只是最后一期 :( 我真的需要完成这个项目。一切都很好，除了在每次迭代之间，没有逗号，这是一个需要 :(
@user3094180 - 逗号到底在哪里？以上是关于res.render 中的 Express-Node JS 车把模板：如何迭代？的主要内容，如果未能解决你的问题，请参考以下文章
Node.js在发送标题后无法设置标题引入res.render（）后出错