繁体   English   中英

流星:来自外部API调用的数据未呈现

[英]Meteor: Data from External API call not rendering

我是Meteor的新手,我正在尝试为我的sister子创建一个网络商店,该商店从她现有的Etsy商店中获取数据并在其上添加自定义外观。 我已经定义了所有Meteor.method来检索数据,并使用一系列console.log语句对数据进行了证明……因此,数据就在其中,但不会在屏幕上呈现。 这是服务器端一些代码的示例:

Meteor.methods({

  ...

    'getShopSections': function() {
      this.unblock();
      var URL = baseURL + "/sections?api_key="+apiKey;
      var response = Meteor.http.get(URL).data.results;
      return response;
    }

  ...

});

此方法返回一个Object数组。 数组返回的对象之一的JSON字符串示例:

{
  active_listing_count: 20,
  rank: 2,
  shop_section_id: 1******0,
  title: "Example Title",
  user_id: 2******7
}

毫不费力地获取了这些数据之后,我准备从客户端进行呼叫,在通过Google搜索将我带到本教程的此处之前,我尝试了几种不同的尝试并失败了: https : //dzone.com/articles/整合您的外部API

在客户端,我有一个nav.js文件,其中包含以下代码,这些代码根据上面的教程改编而成:

Template.nav.rendered = function() {
    Meteor.call('getShopSections', function(err, res) {
      Session.set('sections', res);
      return res;
    });
};
Template.nav.helpers({
    category: function() {
      var sections = Session.get('sections');
      return sections;
    }
});

还有来自我的nav.html模板的示例调用...

<ul>
  {{#each category}}
    <li>{{category.title}}</li>
  {{/each}}
</ul>

因此,我不确定其中发生了一些事情。 首先,尽管显示了适当数量的li占位符,但DOM并未呈现任何category.title字符串。 其次,在遵循以上教程之前,我没有定义Session变量。 考虑到模板加载后商店类别的列表应保持静态,因此我认为从Session变量中了解并没有必要...但是出于某种原因,这就是模板显示一个空的<li>标记与多个等于category.length的空<li>相比---即使我无法理解为什么在这种情况下需要Session变量,它的确使我离我更近了一步目标...我已经在客户端尝试了许多console.log语句,并且100%确定数据已定义并且可用,但是当我在“开发人员工具”窗口中检查源代码时,DOM只会显示一个空li括号的数量。

任何流星专家都可以解释为什么1)DOM不呈现任何标题,以及2)如果Session变量确实必要吗? 如果需要更多信息,请告诉我,我们将非常乐意提供。 谢谢!

使用#each时可以设置数据上下文,因此只需使用:

<li>{{title}}</li>

如果Session是在此处使用或不使用的反应变量的正确类型,那么在不知道您在做什么的情况下很难确定,但我的粗略猜测是Mini Mongo集合可能更适合您在做什么。

为了让您开始确定正确的反应变量类型,以使用此变量,请转到完整的Meteor文档并进行调查:集合,会话和反应变量。

编辑:为了退后一步并澄清一点,模板助手被称为反应式计算。 帮助器内部的反应式计算仅在它们各自的模板中使用并且在计算内部使用反应式变量时才会执行。 反应变量有多种类型,每种都有自己的属性。 在使用Session之前,您的代码可能根本无法工作,因为您没有使用反应式变量。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM