Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm trying to do a tutorial backbone project with peepcode, but I got stuck.

I am trying to render a view from the console by creating a new view from a collection. Here's my code

(function($) {

    window.Album = Backbone.Model.extend({

        isFirstTrack: function(index) {
            return index == 0; 
        },

        isLastTrack: function(index) {
            return index >= this.get('tracks').length - 1; 
        },

        trackUrlAtIndex: function(index) {
            if (this.get('tracks').length >= index) {
                return this.get('tracks')[index].url;
           }
            return null;
        }

    }); 

    window.Albums = Backbone.Collection.extend({
        model: Album,
        url: '/albums'
    });

    window.Album = Backbone.Model.extend({});

    window.AlbumView = Backbone.View.extend({
        tagName: 'li',
        className: 'album',


        initialize: function() {
            _.bindAll(this, 'render');
            this.model.bind('change', this.render);

            this.template = _.template($('#album-template').html());
        },

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

    window.LibraryAlbumView = AlbumView.extend({

    });

    window.LibraryView = Backbone.View.extend({
        tagName: 'section',
        className: 'library',

        initialize: function () {
            _.bindAll(this, 'render');
            this.template = _.template($('#library-template').html());
            this.collection.bind('reset', this.render);
        },

        render: function() {
            var $albums,
                collection = this.collection;

            $(this.el).html(this.template({}));
            $albums = this.$(".albums");
            collection.each(function(album) {
                var view = new LibraryAlbumView({
                    model: album,
                    collection: collection
                });
                $albums.append(view.render().el);
            });
            return this;
        }
    });
})(jQuery);

When I type libraryView = new LibraryView({ collection: library }) In the console I get this response:

TypeError: Cannot call method 'replace' of null

Can anyone help me out?

share|improve this question
You need to drill a little deeper. Try commenting out individual lines in LibraryView until the error goes away. Once you've identified the exact line the causes the error you can probably fix it quite easily. Or use a debugger if you're familiar with that. youtube.com/watch?v=c_oiQYirKuY – CoryDanielson May 11 at 20:37

2 Answers

up vote 2 down vote accepted

Most likely the element for the library view doesn't exist in your markup.

This should be true

$('#library-template').length == 1;

This error can happen if you do:

 _.template(null)
 _.template(undefined);

Calling .html() on an element that doesn't exist returns undefined.

share|improve this answer
Thanks bro! Silly mistake on my part.... – Mike May 11 at 21:32

What exactly is the library variable (that you're using as the value in the constructor argument to LibraryView) set to? It's not defined globally, so it's probably null. You'd need to first declare that variable:

var library = new Albums(),
    libraryView = new LibraryView({ collection: library }) 
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.