Ember.js:单个路由中的多个Ajax调用

前端之家收集整理的这篇文章主要介绍了Ember.js:单个路由中的多个Ajax调用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试从两个类别(新闻和事件)获得两个博客帖子列表,然后将它们显示在我的主页的两个不同的列中.我需要执行2个单独的Ajax调用才能获得这些博文.我不使用ember-data进行这个操作,因为我在这种情况下看不到使用它的优点(但是我可能是错误的).
export default Ember.Route.extend({
  setupController(controller,model) {
    var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category=';

    Ember.$.ajax({ url: wpUrl + 'news',dataType: "jsonp",type: 'GET' }).then(function (data) {
      controller.set('news',data.posts);
    });
    Ember.$.ajax({ url: wpUrl + 'events',type: 'GET' }).then(function (data) {
      controller.set('events',data.posts);
    });
  }
});

上面的代码工作.但是从我在Ember docuMetation中读到的内容,我应该在模型钩子(而不是setupController)中获取这些数据来利用promise.所以我试图用这种方式重写我的代码

export default Ember.Route.extend({
  model() {
    var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category=';

    return {
      news: function () {
        return Ember.$.ajax({ url: wpUrl + 'news',type: 'GET' }).then(function (data) {
          return data.posts;
        })
      },events: function () {
        return Ember.$.ajax({ url: wpUrl + 'events',type: 'GET' }).then(function (data) {
          return data.posts;
        })
      }
    };
  }
});

但这不行. Ajax调用已经完成,但是在页面呈现之后太晚了.我不知道我在做错什么在这种情况下是否有使用ember数据的优点?

解决方法

您可以使用RSVP.hash()返回Promises的哈希值

你可以这样做:

export default Ember.Route.extend({
    model() {
        var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category=';

        return new Ember.RSVP.hash({
            news: Ember.$.ajax({ url: wpUrl + 'news',type: 'GET' }),events: Ember.$.ajax({ url: wpUrl + 'events',type: 'GET' })
        });
    }
});

阅读更多关于Ember here的承诺

猜你在找的Ajax相关文章