Ember.js: nhiều cuộc gọi Ajax trong một tuyến duy nhất

Question

Tôi đang cố gắng nhận hai danh sách bài đăng trên blog từ 2 danh mục (tin tức và sự kiện), sau đó hiển thị chúng trong 2 cột khác nhau của trang chủ. Tôi bắt buộc phải thực hiện 2 cuộc gọi Ajax riêng biệt để nhận các bài đăng trên blog đó. Tôi không sử dụng dữ liệu ember cho hoạt động này, vì tôi không thấy lợi thế của việc sử dụng nó trong trường hợp này (nhưng tôi có thể sai).

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', dataType: "jsonp", type: 'GET' }).then(function (data) { 
     controller.set('events', data.posts); 
    }); 
    } 
}); 

Mã trên hoạt động. Nhưng từ những gì tôi đọc trong tài liệu Ember, tôi nên lấy những dữ liệu đó trong móc model (thay vì setupController) để tận dụng các lời hứa. Vì vậy, tôi đã cố gắng viết lại mã của mình theo cách này:

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', dataType: "jsonp", type: 'GET' }).then(function (data) { 
      return data.posts; 
     }) 
     }, 
     events: function() { 
     return Ember.$.ajax({ url: wpUrl + 'events', dataType: "jsonp", type: 'GET' }).then(function (data) { 
      return data.posts; 
     }) 
     } 
    }; 
    } 
}); 

Nhưng điều này không hiệu quả. Các cuộc gọi Ajax được thực hiện nhưng đã quá muộn, sau khi trang được hiển thị. Tôi không chắc chắn ở đây những gì tôi đang làm sai. Liệu có lợi thế nào khi sử dụng dữ liệu ember cho kịch bản đó?

Answer 1

Bạn có thể trả về một hash của Promises với RSVP.hash()

Bạn có thể làm điều này:

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', dataType: "jsonp", type: 'GET' }), 
      events: Ember.$.ajax({ url: wpUrl + 'events', dataType: "jsonp", type: 'GET' }) 
     }); 
    } 
}); 

Đọc thêm về những lời hứa trong Ember here

Answer 2

Bạn trả về một đối tượng có chứa hai lời hứa chứ không phải là lời hứa thực tế. Những gì bạn cần là xây dựng lời hứa của riêng bạn (Ember.RSVP.Promise) sẽ được giải quyết khi cả hai lời hứa bên trong đều giải quyết.