Ajax request in Backbone View render function

Question

I want to pass an extra variable (the userid) with before rendering my backbone view. I am getting the the extra variable with a ajax request but because is asynchronous I think my page is being rendered before I get the variable. For simplicity lets say I have this in my backbone view :

PostsApp.Views.Post = Backbone.View.extend({
    template: _.template($('#post-template').html()),

    render: function(){
        var newObject = this.model.toJSON();
        $.ajax({
            url:"/user",
            success:function(result){
                newObject.twittername = result.name; ;
            }
        });
        this.$el.html(this.template(newObject));
    }

});

I guess I can put this.$el.html(this.template(newObject)); in the callback but than 'this'refers to something else.. Can anyone think of a work around for this?

Or is it completely very bad to send such a request in the render function..

score 6 · Accepted Answer · edited May 23 '17 at 12:08

You are correct in your assumption. It will not render correctly.

The simple fix

Just like the more general case, you can perform the actual rendering inside the success callback.

 render: function(){
        var newObject = this.model.toJSON();
        var that = this; // to fix that `this` refers to in the callback
        $.ajax({
            url:"/user",
            success:function(result){
                newObject.twittername = result.name; ;
                that.$el.html(that.template(newObject));
            }
        });
    }

The better fix

What I'd do is:

Have the twitter name as a part of the model
fetch it from the model (maybe even with a restful .fetch
listen to change events in the view, and call render on such events.

This is because the view should not be responsible for changing model data in Backbone. It's mixing "business logic" with presentation and it can get ugly pretty fast.

[I think this example 2 from Addy Osmani's "Backbone Fundamentals" should give you a general idea on how this sort of structure is laid out.

thanks a lot.. I was doing it like this for several reasons, i am already fetching and listening to change events.. I wasn't fetching the twitter name because it changes with the user thats logged in and therefore doesnt get saved in the database.. I am not sure if I can fully describe the situation but I feel like something that changes depending on the user shouldnt be a part of the model.. — s_curry_s, Jun 14 '13 at 17:03

Ajax request in Backbone View render function

1 Answers1

The simple fix

The better fix