BackboneJS View - Uncaught TypeError: Cannot read property 'get' of undefined

Question

I have the following Backbone View with a render function that looks like the following:

render: function () {
this.emptyContent();
    if (this.model.get('ChatsInQueue') == -1) {
        this.model.set('ChatsInQueue', '-');
    }
    this.$el.append(this.template({ Stats: this.model.toJSON(), Prior: this.model.get('PriorDayStats') }));

    var self = this;
    this.graphView.model.fetch({

        success: function () {
            self.graphView.render(this.model.get("TotalCalls"), this.model.get("CallsAbandoned"));
        }
    });  
 this.tickerTapeText();
    $(window).trigger('resize');

However, when I run the application, I receive the following console error:

Uncaught TypeError: Cannot read property 'get' of undefined
at success

Can someone help me diagnose what about my success function needs changed so that 'get' is defined?

Answer 1

JavaScript's function binds its own this which is different from the this of the context it's created in. In ES6, arrow functions were introduced as an alternative to a function that doesn't bind its own this (among others, see the MDN web docs).

You already worked around that by declaring a variable self and assigning this to it and used it for the self.graphView.render call. However, in the parameters, you still used this instead of self. Use self there, too, or even better use arrow functions if your environment implements them. Current browsers should already support them.