gpt4 book ai didi

javascript - meteor 模板遍历数组

转载 作者:塔克拉玛干 更新时间:2023-11-02 23:04:19 25 4
gpt4 key购买 nike

js

if (Meteor.isClient) {

Template.body.helpers({
fixtures: function () {
Meteor.call("checkTwitter", function(error, results) {
return results.data.fixtures;
});
}
});
}

if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
Meteor.methods({
checkTwitter: function () {
this.unblock();
var url = "http://api.football-data.org/alpha/teams/73/fixtures";
return Meteor.http.call("GET", url);
}
});
}

html

<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>

我正在获取一个足球队的固定装置列表,并将其作为数组“固定装置”返回。我无法让我的模板列出固定装置。在控制台中,'resuls.data.fixtures' 返回 [obj,obj,obj, obj etc...]。

知道我做错了什么吗?

最佳答案

这是一个工作版本:

应用程序.js

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 [];
}
}
});
}

app.html

<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>

注意事项

  • fixtures数组未从原始 HTTP 结果中解析出来,因此您将额外的数据(如 header )传递回客户端。

  • 助手应该是同步的。这里我们使用 ReactiveVar这是在创建模板时异步设置的,但在助手中同步读取。请参阅我关于 scoped reactivity 的文章如果您不熟悉这些技术。

  • each需要在 <tr> 之外.

  • 确保运行:$ meteor add reactive-var http使上面的例子起作用。

关于javascript - meteor 模板遍历数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28015952/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com