Wrapping my head around a unique backbone.js collection

Question

I'm working out my first backbone.js app and have run into a bit of a wall. Perhaps someone can help me past this hurdle (gap in my understanding). What I want/need to do is to return the collection data to my router, so I can bind it to a Kendo UI Grid, but I'm not seeing any of the search results in my collection... I figure I must be missing something fundamental, but I'm not sure what it is.

Here is what I have so far:

    ES.Router = Backbone.Router.extend({routes: {
            '': 'search',
            'search': 'search',
            'results': 'results'
        },
        results: function() {
            var resultsData = new ES.Results();
            var boo = resultsData.fetch({
                    data: JSON.stringify({"query":"myquery"}),
                    type: 'POST',
                    contentType: 'application/json'
                    });
            console.log(boo);
        }});

    ES.Result = Backbone.Model.extend();

    ES.Results = Backbone.Collection.extend({   
        model: ES.Result,
        url: '/search/query'
        });

Why don't you try to put `success` and `error` callbacks like specified [here](http://backbonejs.org/#Collection-fetch) and try to debug and see which callback it executes. It will give you an idea about it. If its going into `error` callback, make sure your server is returning proper response, it should be a `JSON array of models`. — Cyclone, Dec 04 '12 at 15:19
And `boo` will be a `jqXHR`, logging `resultData` will give you collection. — Cyclone, Dec 04 '12 at 15:25

score 2 · Accepted Answer · answered Dec 04 '12 at 17:42

There are a few issues here:

A fetch should be a GET, not a POST, because a fetch should not save or modify anything
Maybe just a personal preference, but I'd url as a function, so as to avoid trying to modify the AJAX request options manually.
The fetch call will always be asynchronous, so you need to either add a success callback in the options hash, or add a listener to the collection's reset event

I'd write the collection like this:

ES.Results = Backbone.Collection.extend({   
    initialize: function() {
        this.query = "test";
    },
    model: ES.Result,
    url: function() {
        return '/search/query?query=' + this.query;
    }
});

Then set the search when you create the collection:

var resultsData = new ES.Results();
resultsData.query = "soccer";

And use success and/or the on("reset") event to handle the result:

resultsData.on("reset", function(collection) {
    console.log(collection);
});

console.log("Fetching....");
resultsData.fetch({
    success: function(collection, response) {
        console.log("Got data!" + collection.length);
    },
    error: function(collection, response) {
        console.log("Error: " + response.responseText);
    }
});

Thanks for the help. This is was my missing piece. As for the POST vs. GET, I'm not sure I understand why NOT to use a POST. Some of the POST data (query strings) may be very long. — Charles, Dec 05 '12 at 20:21
@Charles I guess it's probably not essential to do a Get. It's just the norm for a REST model, and Backbone uses (by default) Get=fetch, Post=save, and Put=update. — McGarnagle, Dec 05 '12 at 21:03

Wrapping my head around a unique backbone.js collection

1 Answers1