Question

I am currently learning backbone.js via a screencast tutorial, somewhere along the way, my code seems to stop working, throwing the error Cannot call method 'bind' of undefined in Chrome’s javascript console. The erroneous line is contained in the initialize function:

window.PlaylistView = Backbone.View.extend({
    tag: 'section',
    className: 'playlist',

    initialize: function() {
        _.bindAll(this, 'render');
        this.template = _.template($('#playlist-template').html());
        this.collection.bind('reset', this.render);  //<<<<<< THIS LINE

        this.player = this.options.player;
        this.library = this.options.library;
    },

    render: function() {
        $(this.el).html(this.template(this.player.toJSON()));

        this.$('button.play').toggle(this.player.isStopped());
        this.$('button.pause').toggle(this.player.isPlaying());

        return this;
    }
});

I don’t know what this.collection means, why does the view have a collection, isn’t collections for models? this.collection.bind() used in other views did not seem to throw any errors. In window.LibraryAlbumView which calls this.collection.trigger('select', this.model); and extends window.AlbumView, I dont see any collection defined anywhere in window.AlbumView, yet no error is thrown. This seems to be confusing me.

JSFIDDLE

EDIT:

The error has been fixed because instead of

window.Player = Backbone.Model.extend({
        defaults: {
            'currentAlbumIndex': 0,
            'currentTrackIndex': 0,
            'state': 'stop'
        },

        initialize: function() {
            this.playlist = new Playlist();
        },

I had

window.Player = Backbone.Model.extend({
        defaults: {
            'currentAlbumIndex': 0,
            'currentTrackIndex': 0,
            'state': 'stop'
        },

        initialize: function() {
            playlist = new Playlist();    // <<< this line changed!
        },

Also previously this.collection refered to the collection here,

window.BackboneTunes = Backbone.Router.extend({
    routes: {
        '': 'home',
        'blank': 'blank'
    },

    initialize: function() {
        this.playlistView = new PlaylistView({
            collection: window.player.playlist,  // <<<< THIS ONE!
            player: window.player,
            library: window.library
        });

        this.libraryView = new LibraryView({
            collection: window.library
        });
    },

Answer 1

Backbone Views contain a collection or a model, because views are meant for presenting the data contained within a model or a collections of models.

This example throws an error because this.collection has not been defined yet. To do that you need to initialize some collection and then pass it on to your view.

new PlayListView({collection: someCollection});