Javascript Meteor模板遍历数组
js htmlJavascript Meteor模板遍历数组,javascript,meteor,meteor-helper,Javascript,Meteor,Meteor Helper,js html 托特纳姆温泉酒店 点击我 日期 家 结果 远离 {{{#每个固定装置} {{>fixture} {{/每个}} {{date}} {{home} {{result}} {{away}} 我得到了一个足球队的赛程列表，并将其作为一个数组“赛程”返回。我无法让我的模板列出设备。在控制台中，“results.data.fixtures”返回[obj，obj，obj，obj等] 知道我做错了什么吗？尝试将从每个循环返回的对象传递到夹具模板： <body> <h1
托特纳姆温泉酒店
点击我
日期
家
结果
远离
{{{#每个固定装置}
{{>fixture}
{{/每个}}
{{date}}
{{home}
{{result}}
{{away}}
知道我做错了什么吗？尝试将从每个循环返回的对象传递到夹具模板：
<body>
<h1>Tottenham Hotspur</h1>
<button>Click Me</button>
<table class="table">
<th>
<td>Date</td>
<td>Home</td>
<td>Result</td>
<td>Away</td>
</th>
<tr>
{{#each fixtures}}
{{> fixture}}
{{/each}}
</tr>
</table>
</body>
<template name="fixture">
<td>{{date}}</td>
<td>{{home}}</td>
<td>{{result}}</td>
<td>{{away}}</td>
</template>
以下是一个工作版本： app.js app.html
{{>匹配}
托特纳姆温泉酒店
日期
家
结果
远离
{{{#每个匹配}
{{>匹配}
{{/每个}}
{{date}}
{{homeTeamName}}
{{result.goalsHomeTeam}:{{result.goalsAwayTeam}
{{awayTeamName}}
- 没有从原始HTTP结果中解析出
数组，因此您将额外的数据（如标头）传递回客户端fixtures - 助手应该是同步的。在这里，我们使用的是在创建模板时异步设置的，但在助手中同步读取的。如果您不熟悉这些技术，请参阅我的文章
- 每个
都需要在
之外 - 确保运行：
，使上述示例正常工作$meteor add reactive var http
{>fixture this}{{>fixture}<body>
<h1>Tottenham Hotspur</h1>
<button>Click Me</button>
<table class="table">
<th>
<td>Date</td>
<td>Home</td>
<td>Result</td>
<td>Away</td>
</th>
<tr>
{{#each fixtures}}
{{> fixture}}
{{/each}}
</tr>
</table>
</body>
<template name="fixture">
<td>{{date}}</td>
<td>{{home}}</td>
<td>{{result}}</td>
<td>{{away}}</td>
</template>
{{#each fixtures}}
{{> fixture this}}
{{/each}}
if (Meteor.isClient) {
Template.matches.created = function() {
this.matches = new ReactiveVar([]);
var self = this;
Meteor.call('getMatches', function(error, result) {
if (result)
self.matches.set(result);
});
};
Template.matches.helpers({
matches: function() {
return Template.instance().matches.get();
}
});
}
if (Meteor.isServer) {
Meteor.methods({
getMatches: function() {
var url = "http://api.football-data.org/alpha/teams/73/fixtures";
try {
var fixtures = HTTP.get(url).data.fixtures;
return fixtures;
} catch (e) {
return [];
}
}
});
}
<body>
{{> matches}}
</body>
<template name="matches">
<h1>Tottenham Hotspur</h1>
<table class="table">
<th>
<td>Date</td>
<td>Home</td>
<td>Result</td>
<td>Away</td>
</th>
{{#each matches}}
<tr>
{{> match}}
</tr>
{{/each}}
</table>
</template>
<template name="match">
<td>{{date}}</td>
<td>{{homeTeamName}}</td>
<td>{{result.goalsHomeTeam}}:{{result.goalsAwayTeam}}</td>
<td>{{awayTeamName}}</td>
</template>