Как обработать ответ (pagination) от Django REST framework в EmberJS?

Question

[Николай]

Столкнулся с проблемой, ни как не выходит отобразить дополнительные переменные в шаблоне, полученные из ответа Django REST framework.
Не понятно, как реализовать сериализацию когда приходит, по мимо массива, ещё ряд переменных.

Изначально приходил ответ вида:

{
    "results": [{
        "id": 1,
        "title": "lorem ipsum"
    }, {
        "id": 2,
        "title": "lorem ipsum2"
    }, {
        "id": 3,
        "title": "lorem ipsum3"
    }]
}

В файле store.js, такой код:

App.ArticleSerializer = DS.RESTSerializer.extend({
    //override extraction of all array GET responses

    extractArray: function (store, primaryType, payload){
        'use strict';

       payload = { aricles: payload.results };

        return this._super(store, primaryType, payload);
    },
	
    //override extraction of all single item GET responses
    extractSingle: function(store, type, payload, id) {
        'use strict';
        payload = { article: payload };
        return this._super(store, type, payload, id);
    },
    normalize: function(type, hash, prop) {
        'use strict';
        if (!hash.screenshot){
            hash.screenshot = 'img/sample-screenshot.png';
        }
        if (!hash.thumbnail){
            hash.thumbnail = 'img/sample-screenshot.png';
        }

        return this._super(type, hash, prop);
    }
});

В шаблоне следующий код:

<table>
        <thead>
        <tr>
            <th>{{_t "Id"}}</th>
            <th>{{_t "Title"}}</th>
        </tr>
        </thead>

        <tbody>
        {{#each article in this}}
            <tr>
                <td>{{aricle.id}}</td>
                <td>{{article.title}}</td>
            </tr>
        {{/each}}
        </tbody>
    </table>

Но, когда была добавленная пагинация, в ответе появились дополнительные переменные, которые нужно отобразить.
Ответ с доп. переменными count, next, previous:

{
    "count": 100,
    "next": "http://127.0.0.1:8000/console/api/articles?offset=20",
    "previous": "http://127.0.0.1: 8000/console/api/articles",
    "results": [{
        "id": 1,
        "title": "lorem ipsum"
    }, {
        "id": 2,
        "title": "lorem ipsum2"
    }, {
        "id": 3,
        "title": "lorem ipsum3"
    }]
}

Изменение кода extractArray не помогает, меняю так:

extractArray: function (store, primaryType, payload){
        'use strict';
		
		
        payload = { articles: payload.results, next:payload.next, previous:  payload.previous, count: payload.count  };	

		
        return this._super(store, primaryType, payload);
    },

В шаблоне эти переменные не отображаются, пробую так:
count: {{count}} , {{next}}, {{previous}}

Модель статьи:

/*global Ember*/
App.Article = DS.Model.extend({
    id: DS.attr('string'),
    title: DS.attr('string')
});

// probably should be mixed-in...
App.Article.reopen({
    attributes: function () {
        'use strict';
        var model = this;
        return Ember.keys(this.get('data')).map(function (key) {
            return Em.Object.create({model: model, key: key, valueBinding: 'model.' + key});
        });
    }.property()
});

То есть, мне не понятно каким образом aricles преобразуется в this, в коде приложения я не нашёл такого преобразования, возможно сам EmberJs как-то преобразовывает эти данные.

В чём может быть ошибка?

Answer 1

[Станислав Романов]

Не нужно помещать дополнительные переменные в ответ. Нужно использоваться мета-данные. Они именно для этих целей и создавались.

Comments

[Николай]

Спасибо, большое. Читал до этого про мета-данные, но не понимал зачем они нужны :)

Answer 2

[Николай]

В итоге, заработал такой код, с добавлением мета-данных.
Добавил в App.ArticleRoute:

setupController: function(controller, model) {
    this._super.apply(this, arguments); // Do not forget this call
		
    controller.set('meta', model.get('meta')); // эту вставку
  }

В App.ArticleSerializer метод:

extractMeta: function(store, type, payload) {
    if (payload && payload.next && payload.previous && payload.count) {
      store.setMetadataFor(type, { next:payload.next, previous:  payload.previous, count: payload.count });  // sets the metadata for "post"
    }
  },

А в шаблоне так выводил:

count: {{meta.count}} , {{meta.next}}, {{meta.previous}}