Question

我目前使用meteor作为我的微型项目，以获得一点使用经验。设置后不久，我遇到了一些麻烦，我将Data i从第三方站点的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密钥和蒸汽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

您无法从异步调用返回数据。相反，您可以使用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>

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

1 个答案: