为什么我的 Meteor 应用程序中没有显示任何内容？答案

【问题标题】：Why does nothing display in my Meteor application?为什么我的 Meteor 应用程序中没有显示任何内容？
【发布时间】：2014-03-08 19:00:46
【问题描述】：

我的 client.js 文件中有这个

Template.data.champ = Meteor.call("checkLeague", function(error, results) {
        console.log(results.data.data);
        return results.data.data;
});

所以它在 console.log 中显示正常，但实际上并没有显示在网页上。

这是我的带有把手模板的 html 文件

<body>
  {{> hello}}
  {{> data}}
</body>

<template name="hello">
  <h1>Hello World!</h1>
  {{greeting}}
  <input type="button" value="Click" />
</template>

<template name="data">
    {{#each champ}}
        {{name}}
    {{/each}}
</template>

根据我的理解（这在 Handlebars 方面非常有限）但是 {{#each champ}} 迭代对象？但由于某种原因，页面上没有显示任何内容。

这是对象结构（显示在控制台中）。

Object {Aatrox: Object, Ahri: Object, Akali: Object, Alistar: Object, Amumu: Object…}
Aatrox: Object
   id: "Aatrox"
   image: Object
   key: "266"
   name: "Aatrox"
   title: "the Darkin Blade"
   __proto__: Object
Ahri: Object
Akali: Object
Alistar: Object
Amumu: Object
Anivia: Object
Annie: Object
Ashe: Object

所以基本上我传递了一个对象，该对象具有具有对象值的属性。我假设 {{#each} 遍历属性并提供对值（这是一个对象）的访问权限，然后我尝试在 handlebars 模板中访问该变量的 name 属性，但它不起作用.

【问题讨论】：

标签： javascript json meteor spacebars meteor-helper

【解决方案1】：

来自有关Meteor.call的文档：

如果你包含一个回调函数作为最后一个参数（它不能成为方法的参数，因为函数不可序列化），该方法将异步运行：它不会返回任何内容特殊，不会抛出异常。

所以无论分配什么值 Template.data.champ，它都是“没有什么特别的”（请注意，您从回调中返回的内容永远不会在任何地方使用）。

您可以将它存储在这样的会话中：

Session.setDefault('theData', [])

Meteor.call("checkLeague", function(error, results) {
    Session.set('theData', results.data.data)
});

Template.data.champ = function(){
    return Session.get('theData')
}

但我会尝试使用集合。

【讨论】：

那么这个问题的最佳解决方案是什么？正如我在病房里读到的，结果似乎在result 中可用，在error 中出现错误。
@Maaz Dou！更改了我的答案，但大卫已经发布了该解决方案^^'

【解决方案2】：

除了所说的使用会话变量。我认为您还需要将列表转换为仅包含对象的列表，而不是配对的键值列表。

所以你想把你的数据变成这样

var champ = [{ id: "Aatrox",
   image: Object,
   key: "266",
   name: "Aatrox",
   title: "the Darkin Blade"},   
   { id: "Ahri",
   image: Object,
   key: "267",
   name: "Ahri",
   title: "Hitchhikers Guide"}, ... ];

return champ;

要从您当前的结构中获取此结构，您需要执行类似的操作

var champ = [];

for (var a in results.data.data) {
  for (var key in results.data.data[a]) {
      champ.push(results.data.data[a][key]);
    }
}

【讨论】：

我怎样才能用我目前的结构得到那种结构？数据实际上来自返回 JSON 对象的 API。
刚刚更新了我的答案。我认为您还需要按照 David Weldon 所说的去做。

【解决方案3】：

Peppe 的回答是正确的 - 以下是如何处理这种情况的选项：

Template.data.created = function() {
  Meteor.call('checkLeague', function(error, results) {
    Session.set('champ', results.data.data);
  });
};

Template.data.champ = function() {
  return Session.get('champ');
};

在创建模板时加载数据，并异步存储到会话变量中。请记住，这不是反应式的，但由于您的数据来自方法调用，因此很难克服。

【讨论】：

【解决方案4】：

我认为问题可能只是 #each 需要一个数组，而您正在传递一个对象。在你的助手中，试试return _.toArray( result.data.data );。

除了handlebars.js docs mentions Array，我在流星文档中找不到任何提及。另外，我之前通过了 Array 并且可以正常工作。

【讨论】：

是的，我正在查看方法回调的返回并将其与帮助程序的返回混淆。 Peppe 在下面的回答指出了这一点并使用Meteor.call in a template helper is discussed here。
在关于 Meteor.call 问题的其他答案之后，确实似乎车把需要一个数组，所以你的回答肯定有帮助。谢谢！