Backbone - Populating multiple models from one fetch call in my controller

Question

Say I have a collection (of search results, for example) which needs to be populated and a pagination model that needs to take values for current page, total number of pages, etc. In my controller, I make a GET call to an API which returns both search results and pagination information. How, then, can I fetch all this information and parse it into a collection and a separate model? Is this possible?

I am using AirBNB's Rendr, which allows you to use a uniform code base to run Backbone on both the server and the client. Rendr forces me to parse the API response as an array of models, keeping me from being able to access pagination information.

In Rendr, my controller would look like this:

module.exports = {
    index: function (params, callback) {
        var spec = {
            pagination: { model: 'Pagination', params: params },
            collection: { collection: 'SearchResults', params: params }
        };
        this.app.fetch(spec, function (err, result) {
            callback(err, result);
        });
    }
}

I apologize if this is not clear enough. Feel free to ask for more information!

@CodeRunner Well the response from the API call is in the format `{ paginationInfo: {totalPages, currentPage}, results: {{result1}, {result2}, ...}}`. And Rendr has me feed `{results: {{result1}, {result2}, ...}}` into the collection, so I don't know how to feed the pagination information into my Pagination model. — vinsanity555, Jul 16 '14 at 15:22

score 2 · Accepted Answer · answered Nov 01 '15 at 14:31

This is super old so you've probably figured it out by now (or abandoned it). This is as much a backbone question as a Rendr one since the API response is non-standard.

Backbone suggests that if you have a non-standard API response then you need to override the parse method for your exact data format.

If you really want to break it up, the way you may want to code it is:

a Pagination Model
a Search Results Collection
a Search Result Model
and most importantly a Search Model with a custom parse function

Controller:

index: function (params, callback) {
    var spec = {
        model: { model: 'Search', params: params }
    };
    this.app.fetch(spec, function (err, result) {
        callback(err, result);
    });
}

Search Model

var Base = require('./base'),
    _ = require('underscore');

module.exports = Base.extend({
    url: '/api/search',
    parse: function(data) {
        if (_.isObject(data.paginationInfo)) {
            data.paginationInfo = this.app.modelUtils.getModel('PaginationInfo', data.paginationInfo, {
                app: this.app
            });
        }
        if (_.isArray(data.results)) {
            data.results = this.app.modelUtils.getCollection('SearchResults', data.results, {
                app: this.app,
                params: {
                    searchQuery: data.searchQuery // replace with real parameters for client-side caching.
                }
            });
        }
        return data;
    }
});
module.exports.id = 'Search';

I did end up figuring this out, but thanks for your help! I ended up doing something similar, so I'll accept your answer. — vinsanity555, Nov 03 '15 at 18:28

Backbone - Populating multiple models from one fetch call in my controller

1 Answers1

Controller:

Search Model