从服务器端 HTTP.call 获取数据到客户端模板

Question

我目前将流星用于我的一个微型项目，以获得一些使用经验。设置后不久，我遇到了一些麻烦，我从 API 调用接收到的数据到第三方站点到客户端到模板中。我检查了通常的地方以寻找答案并找到了一些信息，但似乎没有任何信息对我有用。

所以我有一个对 Steam Web Api 的简单 API 调用：

Meteor.methods({
  getPlayerStats: function() {
    return HTTP.get("http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=XXXXXXXXXXXXXXX&steamid=XXXXXXXX");
  }
});

（出于匿名目的删除了 API 密钥和 Steam id，但调用确实返回了有效响应）

所以我使用 Iron Router 进行模板渲染。

Router.route('/profile/:steamid', {
  name:'profile',
  template: 'profile',
  data: function() {
    Meteor.call('getPlayerStats', function(err, res) {
      if(err) {
        return {err: err, stat: null};
      } else {
        var redata = JSON.parse(res.content);
        var stats = redata.playerstats.stats;
        console.log({err: null, stats: stats});
        return {err: null, stats: stats};
      }
    });
  }
});

如您所见，我在 data 方法中返回了一个对象，其中包含错误或从 api 调用获得的结果的解析版本。 console.log 实际上返回客户端浏览器中预期的所有内容，即这样的对象：

{err: null, stats: [{name: "xx", value: "XY"},...]}

现在真正让我想知道的部分是模板：

<template name="profile">
  <p>{{err}}</p>
  <ul>
    {{#each stats}}
      <li>{{name}} - {{value}}</li>
    {{/each}}
  </ul>
</template>

它不能渲染任何东西，不是错误（它是空的，因此不是很重要），但也不是 stats 数组。

有人知道我在这个问题上哪里出错了吗？

Answer 1

您不能从异步调用返回数据。相反，您可以在模板的 created 函数中使用 ReactiveVar 或 Session Variable 像这样

Template.profile.created = function () {
// or Template.profile.onCreated(function () {
    var template = this;
    template.externalData = new ReactiveVar(null);
    Meteor.call('getPlayerStats', function(err, res) {
        if(err) {
            template.externalData.set({err: err, stat: null});
        } else {
            var redata = JSON.parse(res.content);
            var stats = redata.playerstats.stats;
            console.log({err: null, stats: stats});
            template.externalData.set({err: null, stat: stats});
        }
    });
};
// }); //comment the above line and use this, if you used onCreated instead of created.

然后在你的助手中，

Template.profile.helpers({
    externalData: function () {
        var template = Template.instance();
        return template.externalData.get();
    }
});

然后在你的模板html中，

<template name="profile">
    {{#if externalData}}
        {{#if externalData.err}}
            <p>There is an error. {{externalData.err}}</p>
        {{else}}
            <ul>
                {{#each externalData.stats}}
                    <li>{{name}} - {{value}}</li>
                {{/each}}
            </ul>
         {{/if}}
     {{/if}}
</template>