流星模板遍历数组

Question

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

I am getting a list of fixtures of a football team and returning it as an array 'fixtures'. 我得到了一个橄榄球队的固定装置列表，并将其作为阵列'固定装置'返回。 I could not get my template to list the fixtures. 我无法让我的模板列出灯具。 In the console 'resuls.data.fixtures' returns [obj,obj,obj, obj etc...]. 在控制台'resuls.data.fixtures'中返回[obj，obj，obj，obj等...]。

Any idea what I am doing wrong? 知道我做错了什么吗？

Answer 1

Here is a working version: 这是一个工作版本：

app.js app.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 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>

Notes 笔记

The fixtures array was not being parsed out of the original HTTP result, so you were passing extra data (like the headers) back to the client. fixtures数组未从原始HTTP结果中解析出来，因此您将额外数据（如标题）传递回客户端。
Helpers should be synchronous. 助手应该是同步的。 Here we use a ReactiveVar which is asynchronously set when the template is created, but synchronously read in the helper. 这里我们使用ReactiveVar ，它在创建模板时异步设置，但在帮助器中同步读取。 See my article on scoped reactivity if these techniques are unfamiliar to you. 如果您不熟悉这些技术，请参阅我关于范围反应性的文章。
The each needs to be outside of the <tr> . each需要在<tr> 。
Make sure to run: $ meteor add reactive-var http for the above example to work. 确保运行： $ meteor add reactive-var http以使上述示例正常工作。

Answer 2

Try passing the object returned from your each loop, which should be this , to your fixture template: 尝试将每个循环返回的对象（应该是this ）传递给fixture模板：

{{#each fixtures}}
  {{> fixture this}}
{{/each}}

流星模板遍历数组

问题描述

2 个解决方案

解决方案1
3 2015-01-19 06:36:20

app.js app.js

app.html app.html

Notes 笔记

解决方案2
2 2015-01-19 05:29:08

流星模板遍历数组

问题描述

2 个解决方案

解决方案1 3 2015-01-19 06:36:20

app.js app.js

app.html app.html

Notes 笔记

解决方案2 2 2015-01-19 05:29:08

解决方案1
3 2015-01-19 06:36:20

解决方案2
2 2015-01-19 05:29:08