Ember.js 和 API 分页答案

【问题标题】：Ember.js and API paginationEmber.js 和 API 分页
【发布时间】：2013-12-20 01:58:37
【问题描述】：

我正在使用带有 API 的 Ember.js (v1.2.0)，它返回分页的 JSON 数据，如下所示：

{
    "count": 5, 
    "next": "http://127.0.0.1:8000/some/resource/?page=2", 
    "previous": null, 
    "results": [
        {
            "id": 37, 
            "title": "Some title", 
            "description": "Some description", 
        }, 
        {
            "id": 35, 
            "title": "Sdflskdf", 
            "description": "sdfkdsjf", 
        }, 
        {
            "id": 34, 
            "title": "Some other title", 
            "description": "Dsdlfksdf", 
        }, 
    ]
}

我不使用 ember-data，所以我使用一个普通的 ember 对象作为我的模型并像这样加载数据：

App.SomeResource = Ember.Object.extend({});

App.SomeResource.reopenClass({
    find: function () {
        return $.getJSON('/some/resource/').then(function (response) {
            return response.results.map(function (data) {
                return App.SomeResource.create(data);
            });
        });
    },
});

我的模型类的 find 方法返回一个解析为对象数组的 promise。在创建 SomeResource 对象时，所有的分页数据都会丢失。

当承诺解决时，有没有办法在某处存储 count、next 和 previous 页面网址？

【问题讨论】：

标签： ember.js model pagination promise

【解决方案1】：

我将它们分配给全局对象，但你应该做得更好。

App.SomeResource = Ember.Object.extend({});

App.SomeResource.reopenClass({
    find: function () {
        return $.getJSON('/some/resource/').then(function (response) {
            return RSVP.all(response.results.map(function (data) {
                return App.SomeResource.create(data);
            })).then(function(createdResources) {
                window.count = response.count;
                window.next = response.next;
                window.previous = response.previous;
                return createdResources;
            });
        });
    }
});

【讨论】：

它似乎工作，但如果我分页几个模型它会覆盖元数据。

【解决方案2】：

我没有将此元数据存储在全局 window 对象上，而是提出了以下建议：

App.SomeResource.reopenClass({
    find: function () {
        var url = '/some/resource/';
        return Ember.$.getJSON(url).then(function (response) {
            response.results = response.results.map(function (resource) {
                return App.SomeResource.create(resource);
            });
            return response;
        });
    },
});

SomeResource.find() 只是从结果数组中实例化 Ember 对象，然后返回其余数据不变的响应。然后路由接收响应并在setupController函数中设置分页数据和模型：

App.SomeResourceRoute = Ember.Route.extend({
    model: function () {
        return App.SomeResource.find();
    },

    setupController: function(controller, model) {
        controller.setProperties({count: model.count,
                                  pageCount: model.page_count,
                                  currentPage: model.current_page,
                                  pageRange: model.page_range,
                                  previous: model.previous,
                                  next: model.next,
                                  model: model.results,});
    },
});

它有效，但也许有更好的方法。

【讨论】：