fullCalendar with backbone.js give error

Question

I'm try to implement fullCalendar with backbone.js but I got an error: Uncaught Error: bindAll must be passed function names

I'm following this tutorial that is bit old so maybe is out of date but checking other more recent examples in the web, the code seems right. I premise that I'm working with Rails application but I'm not connect with the db yet and my datas are a fake json file.

So here my code:

$(function() {
    var CalendarApp = Backbone.View.extend({
        el: $('#wrap'),

        initialize: function(){
            this.headerModel = new HeaderModel();
            this.headerView = new HeaderView({
                model: this.headerModel,
                el: $('header')
            });
            this.headerModel.fetch();

            this.eventsView = new EventsView({
                el: $("#calendarView"),
                collection: events
            }).render();

            this.events.fetch();
        }
    });

    var calendar = new CalendarApp;

});

EventsView.js (here I got the error)

var EventsView = Backbone.View.extend({
    collection: events,

    initialize: function(){
        _.bindAll(this);

        this.collection.bind('reset', this.addAll);
    },

    render: function(){
        this.$el.fullCalendar({
            header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay',
                    ignoreTimezone: false
                },
                selectable: true,
                selectHelper: true,
                editable: true
        });
    },

    addAll: function(){
        this.$el.fullCalendar ("addEventSource", this.collection.toJSON());
    }
});

EventsCollection:

var Events = Backbone.Collection.extend({
    model: Event,
    url: "events"
});

var events = new Events();

EventModel.js

var Event = Backbone.Model.extend();

What i'm missing?

Answer 1

bindAll is an underscore.js method. In backbone it's often used to bind this to a bunch of methods which are defined in the class. As the error says, you have to give it at least one function.

For example if you wish to make sure that the addAll-method in your view accesses the correct this, you can bind it like so:

var EventsView = Backbone.View.extend({
    collection: events,

    initialize: function(){
        _.bindAll(this, 'addAll');

        this.collection.bind('reset', this.addAll);
    },

    // Render function removed to clarify

    addAll: function(){
        this.$el.fullCalendar ("addEventSource", this.collection.toJSON());
    }
});