Uncaught TypeError: undefined is not a function when calling a function in backbone

Question

I am getting the following error message,

Uncaught TypeError: undefined is not a function

When running the following code,

render: function() {

    var cal_current_date = new Date();
    console.log("Dashboard Render");

    this.$el.html(this.template({
        dates: app.dates
    }));

    console.log("changing .calender-holder width");

    var width = $(".month-column").length * parseInt($(".calender").width()) / 6;
    $('.calender-holder').width(width);
    $('.month-column').width( width / $(".month-column").length);

    var month = cal_current_date.getMonth();

    if(month > 2) {
        var marginLeft = (month * 2) * parseInt( $('.month-column').width() );
        this.$el.find('.calender-holder').css("margin-left", "-" + marginLeft + "px" );
    }

    this.projectDashboardView = new app.ProjectDashboardView({
        collection: this.collection
    });

    return this;

},

app.ProjectDashboardView = Backbone.View.extend({

el: '.project-holder',

events: {

},

initialize: function() {
    console.log("ProjectDashboardView initialize");
    this.collection.on("reset", this.render);
    this.collection.on("add", this.addOne);

},

render: function() {
    console.log("ProjectDashboardView render");
    this.addAll(); <!---------- COMPLAINING ABOUT THIS LINE
},

addAll: function() {
    console.log("allAdd");
    this.collection.each( this.addOne );
},

addOne: function() {
    console.log("addOne");
    var view = new app.ProjectTimelineEntry({ model: model });
    this.$el.append( view.render().el );
}

});

I have added where the problem is the in code, it is as if this is undefined, or incorrectly defined, if I console.log(this) I just get the collection that was passed to the view, should I not get all the functions of that view as well?

Answer 1

simple way to solve this is using _bindAll in the initialize of your view.

this is how your initialize should look like after using it

initialize: function() {
            _.bindAll(this,'render','addAll','addOne');
             console.log("ProjectDashboardView initialize");
             this.collection.on("reset", this.render);
             this.collection.on("add", this.addOne);
        }