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

霓虹灯棕82

我是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>标签之间的区别与大量的空<li>等于category.length ---因此,即使我无法理解为什么在这种情况下需要使用Session变量,它的确使我离目标更近了一步……我尝试了许多控制台客户端上的.log语句,我100%确定数据已定义并且可用,但是当我在“开发人员工具”窗口中检查源代码时,DOM仅显示了许多空li括号。

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

丹·西贝斯

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

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

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

来自外部JSON文件的主干集合未呈现

来自分类Dev

如何设置流星以接收来自外部API的事件?

来自分类Dev

来自外部REST API的AWS Glue作业消耗数据

来自分类Dev

带有来自外部 Api 的缓存数据的 Falcor 模型

来自分类Dev

来自外部表的MySQL数据

来自分类Dev

计算来自外部源的数据

来自分类Dev

仅允许来自外部网络的api

来自分类Dev

仅允许来自外部网络的api

来自分类Dev

通过 API-KEY 使用来自外部 API 的数据的 Alexa 技能

来自分类Dev

ember-app-kit-使用来自外部文件的数据对api进行存根

来自分类Dev

使用Promise用来自外部API的数据填充数组

来自分类Dev

在没有API的情况下显示来自外部URL的JSON数组中的数据

来自分类Dev

来自外部库的Swift函数未导入

来自分类Dev

来自外部文件JavaScript的未捕获的ReferenceError

来自分类Dev

Rails 模拟调用来自外部 Web 服务?

来自分类Dev

来自外部控制函数的 Angular 方法调用

来自分类Dev

查看Google Spreadsheet中的数据(数据来自外部)

来自分类Dev

莫里斯图表不显示来自外部URL的数据

来自分类Dev

莫里斯图表不显示来自外部URL的数据

来自分类Dev

修复来自外部网络的内核丢弃数据包

来自分类Dev

来自外部数据的 Angular 2 Bootstrap 应用程序

来自分类Dev

将来自外部网站的帖子数据提交到 Laravel

来自分类Dev

流星:模板呈现数据后的调用函数

来自分类Dev

将来自外部api的内容添加到Contentful

来自分类Dev

IONIC / Angular不显示来自外部API的JSON结果

来自分类Dev

来自外部 api 的 @Autowiredl bean 始终为空

来自分类Dev

来自外部硬盘的Ubuntu

来自分类Dev

来自外部js的函数

来自分类Dev

来自外部集群的NMI

Related 相关文章

热门标签

归档