Question

Having a problem with Backbone being inconsistent. I’ve added a console.log to the fetch method on my collection, so I know that there is always data being provided by the server, but sometimes my view fails to see that information, or shows this.model.models.length to be zero, when I know that the fetch returned objects.

I can’t figure out any reason why I would be dropping the objects between fetch and trying to view them, so hopefully somebody can help.

My router looks like this:

Router = Backbone.Router.extend({
    routes: {
       ""              : "index",
       "/"             : "index",
       "testing"       : "index",
       "follow/:type/" : "follow"
    },

    follow: function(type) {
        switch(type) {
            case "companies":
               this.followedItems = new FollowedCompanies();
               break;
            case "software":
               this.followedItems = new FollowedSoftware();
               break;
            case "hardware":
               this.followedItems = new FollowedHardware();
               break;
            case "tags":
               this.followedItems = new FollowedTags();
               break;
            case "people":
               this.followedItems = new FollowedPeople();
               break;
            default:
        }
        title = type.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
        this.followedItems.fetch({
            success: function(data) {
            },
            error: function(data) {
                console.log("Error: " + data);
            }
        });
        this.followView = new FollowView({
            model: this.followedItems,
            el: $("#activityFeed"),
            title: title
        });
    }
});

    var router = new Router();
    Backbone.history.start();

Model / Controller, Snipped to just one for brevity, but all are the same, and even one is inconsistent:

var FollowedSoftware = Backbone.Collection.extend({
    url: '/api/v1/follow_software/?format=json',
    model: TestFollowing,
    parse: function(resp) { 
          console.log(resp.objects); 
          return resp.objects; 
    }
});

My view looks like this:

var FollowView = Backbone.View.extend({
    template: _.template($("#FollowHeaderTemplate").html()),
    initialize: function() {
        var self = this;
        $(self.el).slideUp('fast', function() {
            self.model.fetch(); // Put here for to help?  Doesn't matter if it's here or not really. 
            $(self.el).html(self.render());
        });
        $(self.el).slideDown('slow');
        // this.model.reset();
    },
    render: function() {
        var self = this;
        $(this.el).html(new FollowHeaderView().render({title: this.options.title}).el);
        console.log(this.model.models);
        $(self.el).append(new FollowHeaderView({title: this.options.title}).render());
        _.forEach(this.model.models, function(item) {
             $(self.el).append(new FollowedItemView({model: item}).render().el);
        });
    }
})

var FollowHeaderView = Backbone.View.extend({
    template: _.template($("#FollowHeaderTemplate").html()),
    render: function() {
        $(this.el).html(this.template({"title": title}));
        return this;
    }
})

var FollowedItemView = Backbone.View.extend({
    template : _.template( $("#FollowedTemplate").html()),
    render: function() {
        $(this.el).html(this.template({"item" : this.model.toJSON()}))
        return this;
    }
});

Even just doing the ‘Software’ route, sometimes it works, sometimes it doesn’t. The console.log method in fetch always returns with working data, but the console.log in the view only does sometimes.

I’m not caching anything anywhere on either client or server, but I can’t make this work consistently. On my .fetch calls, I’ve added success and error callbacks, but the error callback never triggers. I haven’t overridden sync anywhere. I’m using 0.9.2 of Backbone, and the providing server is powered by Django-Tastypie, which is working flawlessly (and works flawlessly on some other models with identical code.)

Might have something to do with the switch statement, but I don’t see how it would, and defining a route for each ‘type’ seems silly (though I’ll do it if I have to).

Am I missing something?

Answer 1

At the end of your router’s follow method, you’re calling fetch, and then immediately initializing your view. You should initiailize the view, call fetch on the collection, and then bind the view’s render method to the collection’s "reset" event. The flow is asynchronous and should be handled accordingly.

Here’s an example of binding to the reset event rather than having to implement success/error methods on fetch (you typically don’t have to do this).

var FollowView = Backbone.View.extend({
    template: _.template($("#FollowHeaderTemplate").html()),
    initialize: function() {
        var self = this;
        $(self.el).slideUp('fast', function() {
            self.model.fetch(); // Put here for to help?  Doesn't matter if it's here or not really. 
            $(self.el).html(self.render());
        });
        $(self.el).slideDown('slow');

        // **ADDED BY lupefiasco**
        self.model.on('reset', function() {
            self.render();
        }, this);
    },
    render: function() {
        var self = this;
        $(this.el).html(new FollowHeaderView().render({title: this.options.title}).el);
        console.log(this.model.models);
        $(self.el).append(new FollowHeaderView({title: this.options.title}).render());
        _.forEach(this.model.models, function(item) {
             $(self.el).append(new FollowedItemView({model: item}).render().el);
        });
    }
})

Side notes

You are re-initializing the view on every call to the route /follow/:type, which is perfectly fine, but you need to unbind the old view before initializing the new view. So do something like this.

if (this.followView != null) {
     this.followView.off(); // old view is now unbound
}
this.followView = new FollowView();

You don’t need to pass in the view’s root element in the constructor. Just define it in the view via the el property, and Backbone automatically sets up $el (a “jQuerified” version ) for you.

var FollowedItemView = Backbone.View.extend({
    template : _.template( $("#FollowedTemplate").html()),
    el: '#activityFeed',
    render: function() {
            this.$el.html(this.template({"item" : this.model.toJSON()}))
            return this;
    }
});

You’re passing in your collection to the view via the model property, when you should be passing it in via the collection property. I don’t think this makes much of a difference functionality-wise, but it is best practice.