Node Express渲染Dom元素

Question

我正在尝试创建一个英雄联盟帐户查找网站，并尝试学习如何正确呈现HTML。我有一个大对象，其中包含许多不同匹配的信息。我想为匹配历史中的每个匹配创建一个DOM元素，然后用对象中包含的信息填充该元素。我如何才能以动态的方式做到这一点。我并不总是知道对象中会有多少匹配。

match0: {
champion: 76,
gameStartTime: 1600413655154,
gameDuration: 1347,
playerList: {
Team_100_JUNGLE: [Object],
Team_100_MIDDLE: [Object],
Team_100_BOTTOM: [Object],
Team_100_SUPPORT: [Object],
Team_100_TOP: [Object],
Team_200_MIDDLE: [Object],
Team_200_JUNGLE: [Object],
Team_200_BOTTOM: [Object],
Team_200_SUPPORT: [Object],
Team_200_TOP: [Object]
},
result: 'Loss',
team_100_total_kills: 15,
team_200_total_kills: 23
},

这就是比赛历史数组中的每一场比赛的样子。数组中可能有1个这样的对象，或者1000个。我该怎么做？我需要彻底调整我的工作方式吗？发送帮助。

Answer 1

在我看来，你最好的选择是使用某种模板引擎，你可以预定义一个DOM结构(模板(，然后向它抛出你的数据对象(最多是json(，它会用你的数据物体提供的所有数据来呈现模板。

Handlebarsjs是我的选择，但有很多选择，希望它能帮助你，如果你需要进一步的帮助，请告诉我https://handlebarsjs.com/

编辑：遗憾的是，我没有使用EJS，但我试图用Handlebars的例子来解释它。"；matchhistory.hbs"；是您可以用来显示所有匹配项的示例模板。这是通过#each发生的，它将在您提供给它的所有数据中循环。在Web服务器中，您只需要呈现它并将其发送回请求https://example.com/matchhisorty例如

至于你目前的问题，你还没有创建DOM，rendner会帮你做的。

Express Web服务器(index.js(：

//This is only temporary, you need to call the lol api so you got the newest data
//Call the api in the router.get('/matchhistory')
let matchhistory = [
match0: {
champion: 76,
...
result: 'Loss',
team_100_total_kills: 15,
team_200_total_kills: 23
},
match1: {
champion: 76,
...
result: 'Loss',
team_100_total_kills: 15,
team_200_total_kills: 23
},
]

router.get('/matchhistory', function(req, res, next) {
let raw = matchhistory; //Here you can make your api call to get the matchhistory data
let parsedata = JSON.parse(raw); //Parse it to json
res.render('matchhistory', { title: 'Posts - Canime', pod_cards: home.pod.cards , naventry: home.nav.naventry}); //Send back the rendered Page
});

比赛历史记录。。hbs

<ul class="matchhistory-nav mr-auto">
{{#each matchhistory}}
<li class="nav-item" class="color-{{this.result}}">
{{this.champion}}
</li>
{{/each}}
</ul>