TypeError: Cannot call method 'bind' of undefined error in Backbone with Django-Tastypie

Question

I'm writing a simple example to learn Backbone and Django-Tastypie. I'm using Backbone.js 1.0.

In the console, when I try notes = new NoteListView(); I get the error TypeError: Cannot call method 'bind' of undefined.

From what I've read online, I THINK that it's because the template isn't instantiated. But, the template is cached in the template call on the View. So, I'm confused.

Maybe my thinking is completely wrong, but what supposed to happen is the bind happens on the template that has been cached so that it can do the set and populate the template.

The TastpieCollection and TasttypieModel come from http://paltman.com/2012/04/30/integration-backbonejs-tastypie/ which seems to work really well.

$(function() {

    // Note: The model and collection are extended from TastypieModel and TastypieCollection
    // to handle the parsing and URLs

    window.Note = TastypieModel.extend({});

    window.Notes = TastypieCollection.extend({
        model: Note,
        url: NOTES_API_URL
    });

    window.NoteView = Backbone.View.extend({

        template: _.template($('#notes-item').html()),

        initialize: function () {
            _.bindAll(this, 'render');
            this.model.bind('set', this.render);
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    })

    window.NoteListView = Backbone.View.extend({

        template: _.template($('#notes-item-list').html()),

        initialize: function () {
            _.bindAll(this, 'render');
            this.collection.bind('set', this.render);
        },
        render: function() {
            var $notes,
                collection = this.collection;
            this.$el.html(this.template());
            $notes = this.$('.notes');
            collection.each(function(note){
                var view = new NoteView({
                    model: note,
                    collection: collection
                });
                $notes.append(view.render().el);
            });
            return this;
        }
    })
})

So, two questions:

Question One: What is the error saying and how do I fix it?

Question Two: The set is the new version of how reset was used... correct?

Thanks for your help.

Answer 1

You are not setting a collection, that is the reason of your error message. You should do something like this to fix that specific error message:

notes = new NoteListView({collection : new Notes()});