I'm having some error in my app and don't know why.

Uncaught TypeError: Cannot call method 'on' of undefined 

It happens on my collection view, follow the code:

App.WorkoutsView = Backbone.View.extend({
    initialize: function(){
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
    },

    render: function() {
        this.addAll();
        return this;
    },

    addAll: function() {
        this.$el.empty();
        this.collection.forEach(this.addOne, this);
    },

    addOne: function(Workout) {
        var workoutView = new App.WorkoutView({model: App.Workout});
        this.$el.append(workoutView.render().el);
    }
});

the problem is on:

this.collection.on('add', this.addOne, this);

Anyone knows why?

** Edit: Collection code **

App.WorkoutItems = Backbone.Collection.extend({
    model: App.Workout,
    url: '/workouts',

    localStorage: function() {new Backbone.LocalStorage('Workout')},

    initialize: function() {
        this.on('remove', this.hideWorkout, this);
    },

    hideWorkout: function() {
        model.trigger('hide');
    },

    focusOnWorkoutItem: function() {
        var modelsToRemove = this.filter(function(workoutItem) {
            return workoutItem.id != id;
        });
    this.remove(modelsToRemove);
    }
});

Edit: my Router code where i'm instantiating WorkoutsView:

App.Router = Backbone.Router.extend({
    routes: {
        '':'index'
    },

    initialize: function() {
        this.workoutItems = new App.WorkoutItems();
        this.workoutsView = new App.WorkoutsView();
        this.workoutsView.render();
    },

    index: function() {
        $('#workouts').html(this.workoutsView.el);
        this.workoutsItem.fetch();
    }
});

new App.Router;
Backbone.history.start();

I'm having some error in my app and don't know why.

Uncaught TypeError: Cannot call method 'on' of undefined 

It happens on my collection view, follow the code:

App.WorkoutsView = Backbone.View.extend({
    initialize: function(){
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
    },

    render: function() {
        this.addAll();
        return this;
    },

    addAll: function() {
        this.$el.empty();
        this.collection.forEach(this.addOne, this);
    },

    addOne: function(Workout) {
        var workoutView = new App.WorkoutView({model: App.Workout});
        this.$el.append(workoutView.render().el);
    }
});

the problem is on:

this.collection.on('add', this.addOne, this);

Anyone knows why?

** Edit: Collection code **

App.WorkoutItems = Backbone.Collection.extend({
    model: App.Workout,
    url: '/workouts',

    localStorage: function() {new Backbone.LocalStorage('Workout')},

    initialize: function() {
        this.on('remove', this.hideWorkout, this);
    },

    hideWorkout: function() {
        model.trigger('hide');
    },

    focusOnWorkoutItem: function() {
        var modelsToRemove = this.filter(function(workoutItem) {
            return workoutItem.id != id;
        });
    this.remove(modelsToRemove);
    }
});

Edit: my Router code where i'm instantiating WorkoutsView:

App.Router = Backbone.Router.extend({
    routes: {
        '':'index'
    },

    initialize: function() {
        this.workoutItems = new App.WorkoutItems();
        this.workoutsView = new App.WorkoutsView();
        this.workoutsView.render();
    },

    index: function() {
        $('#workouts').html(this.workoutsView.el);
        this.workoutsItem.fetch();
    }
});

new App.Router;
Backbone.history.start();

• javascript
• jquery
• backbone.js

Share Improve this question Follow edited May 31, 2013 at 15:35 Guilherme asked May 31, 2013 at 15:24 GuilhermeGuilherme 1,10311 gold badge1515 silver badges2929 bronze badges 3

• What exactly is this.collection? – Danilo Valente Commented May 31, 2013 at 15:26
• 1 Can you show the code you're using to instantiate the view? – net.uk.sweet Commented May 31, 2013 at 15:28
• @MarkLinus Workout collection, i will add the code – Guilherme Commented May 31, 2013 at 15:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

 this.workoutsView = new App.WorkoutsView();

is supposed to pass in a collection

 this.workoutsView = new App.WorkoutsView({collection : this.workoutItems});

Because you view when being initialized is expecting to have a collection available to it as you are binding a event to it in the Initialize method of the view.