I am receiving the following message when I try to use Backbone's collection.each() method:

TypeError: Object function (){ return parent.apply(this, arguments); } has no method 'each'.

I'm learning Backbone from some Jeffrey Way tutorials; I entered identical code to his, but for some reason it doesn't work.

var Person = Backbone.Model.extend({
    defaults: {
        name: 'besim dauti',
        age: 15,
        occupation: 'web developer'
    }
});

var PeopleView = Backbone.View.extend({
    tagName: 'ul',

    render: function(){
        this.collection.each(function(person) {
            var personView = new PersonView({ model: person });
            this.$el.append(personView.render().el)
        }, this)
        return this;
    }
});

var PersonView = Backbone.View.extend({
    tagName: 'li',

    template: _.template( $('#personTemplate').html() ),

    render: function(){
        this.$el.html(this.template(this.model.toJSON()) );
        return this;
    }
});

var PeopleCollection = Backbone.Collection.extend({
    model: Person
});

var peopleCollection = new PeopleCollection([
    {
        name: 'besim',
        age: 25,
        occupation: 'web developer'
    },
    {
        name: 'gaurav',
        age: 25,
        occupation: 'web designer'
    },
    {
        name: 'jeffry',
        age: 27
    }
])

var peopleView = new PeopleView ({collection: PeopleCollection});
$(document.body).append(peopleView.render().el);

Why is there this problem with the .each() function? I typed the code identically and, for Jeffrey, it worked as expected, but for me it displayed this error. I appreciate your help.

I am receiving the following message when I try to use Backbone's collection.each() method:

TypeError: Object function (){ return parent.apply(this, arguments); } has no method 'each'.

I'm learning Backbone from some Jeffrey Way tutorials; I entered identical code to his, but for some reason it doesn't work.

var Person = Backbone.Model.extend({
    defaults: {
        name: 'besim dauti',
        age: 15,
        occupation: 'web developer'
    }
});

var PeopleView = Backbone.View.extend({
    tagName: 'ul',

    render: function(){
        this.collection.each(function(person) {
            var personView = new PersonView({ model: person });
            this.$el.append(personView.render().el)
        }, this)
        return this;
    }
});

var PersonView = Backbone.View.extend({
    tagName: 'li',

    template: _.template( $('#personTemplate').html() ),

    render: function(){
        this.$el.html(this.template(this.model.toJSON()) );
        return this;
    }
});

var PeopleCollection = Backbone.Collection.extend({
    model: Person
});

var peopleCollection = new PeopleCollection([
    {
        name: 'besim',
        age: 25,
        occupation: 'web developer'
    },
    {
        name: 'gaurav',
        age: 25,
        occupation: 'web designer'
    },
    {
        name: 'jeffry',
        age: 27
    }
])

var peopleView = new PeopleView ({collection: PeopleCollection});
$(document.body).append(peopleView.render().el);

Why is there this problem with the .each() function? I typed the code identically and, for Jeffrey, it worked as expected, but for me it displayed this error. I appreciate your help.

• javascript
• backbone.js

• What happens when you add a new line at the start of PeopleView's render like console.log(this.collection);? The general problem appears to be that this.collection isn't what you think it is (because if it was, it'd have an each method). So if you look at what it actually is in the console (with Firebug, Chrome developer tools, etc.), it will likely help you figure out what's going wrong. – machineghost Commented May 18, 2013 at 18:33

2 Answers 2

You need to initialise the PeopleCollection.

See: var peopleView = new PeopleView ({collection: PeopleCollection});

You are passing in the raw constructor and not an instance of it.

You should do this:

var peopleCollection = new PeopleCollection(); // Create an instance of PeopleCollection
var peopleView = new PeopleView ({collection: peopleCollection}); // Pass it to peopleView

If you are familiar with OOP (Object orientated programming) think of PeopleCollection as a class and var peopleCollection = new PeopleCollection() as an instance of that class. You must work with instances.

You will also encounter an error inside your .each because you capitalised person. Change to:

this.collection.each(function(person) {
   var personView = new PersonView({ model: person });
   this.$el.append(personView.render().el)
}, this)

Your code works fine in jsfiddle.

http://jsfiddle/puleos/kbLES/

var peopleView = new PeopleView ({collection: peopleCollection});
$(document.body).append(peopleView.render().el);

It looks like you may have a dependency issue. Can you post how you are including your scripts on the page?