CODEWITHSUNDEEP
javascriptjqueryajaxbackbone.jsmarionette
Philippe David
Philippe David

Reputation: 8914

Backbone fetch not working

Following Backbone/Marionette Controller and Collection won't fetch.

define(["jquery", "backbone","models/Poi"],
    function($, Backbone, Poi) {
        // Creates a new Backbone Poi class object
        var PoiCollection = Backbone.Collection.extend({
            model:Poi,

            parse: function (response) {
                console.log(response);
                // Return people object which is the array from response
                return response;
            }
        });

        // Returns the Poi class
        return PoiCollection;
    }
);
define(['App', 'backbone', 'marionette', 'views/MapView', 'views/DesktopHeaderView', 'views/DesktopFooterView', 'models/Poi'],
        function (App, Backbone, Marionette, MapView, DesktopHeaderView, DesktopFooterView, Poi) {
            return Backbone.Marionette.Controller.extend({
                initialize: function (options) {
                    App.headerRegion.show(new DesktopHeaderView());
                    App.mainRegion.show(new MapView());
                    App.footerRegion.show(new DesktopFooterView());
                },
                //gets mapped to in AppRouter's appRoutes
                index: function () {

                    console.log("Ajax::list of POI");
                    var p = new Poi();
                    p.fetch({
                        success: function (data) {
                            console.log("data");
                        }
                    });
                    console.log(p);
                }
            });
        });

I have no Idea where to look to debug this. The Network tab tells me that the data was fetched, but the success method is never called.

Thanks

Upvotes: 0

Views: 954

Answers (1)

Mike Stapp
Mike Stapp

Reputation: 626

I think your fetch call itself looks OK, but two other apparent bugs could be affecting that call:

1) Your log message in the index function says "list of Poi", but you're using a (single) Poi instance -- should that be PoiCollection instead? I'm assuming the Poi model (not shown above) is for a single item.

2) There's no url property in the PoiCollection, so if you did fetch a PoiCollection instead, that call would fail because PoiCollection doesn't know what URL to use. The most common pattern with Collection + related Model is to put an url only in the Collection, and no url in the single Model for the Collection's individual items (Poi in this case). Backbone will construct the corresponding individual-model URLs as needed based on the parent Collection's url. I think getting the url straightened out will help here.

Finally, one more thing: the fist parameter passed to the fetch call's success function is the Model or Collection instance itself, not the raw data object. That's not relevant for the current success code you have now (you're only logging a static string), but it will be relevant as soon as you try using that parameter. :-)

Upvotes: 1

Related Questions