TypeError：无法调用 null 的“替换”方法 - Backbone.js答案

【问题标题】：TypeError: Cannot call method 'replace' of null - Backbone.jsTypeError：无法调用 null 的“替换”方法 - Backbone.js
【发布时间】：2013-05-11 20:20:20
【问题描述】：

我正在尝试使用 peepcode 做一个教程主干项目，但我卡住了。

我正在尝试通过从集合中创建新视图来从控制台呈现视图。这是我的代码

(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);

当我在控制台中输入 libraryView = new LibraryView({ collection: library }) 时，我会收到以下响应：

TypeError: 无法调用 null 的“替换”方法

谁能帮帮我？

【问题讨论】：

您需要再深入一点。尝试注释掉 LibraryView 中的各个行，直到错误消失。一旦您确定了导致错误的确切行，您就可以很容易地修复它。或者如果您熟悉它，请使用调试器。 youtube.com/watch?v=c_oiQYirKuY

标签： javascript jquery model-view-controller backbone.js

【解决方案1】：

库视图的元素很可能不存在于您的标记中。

这应该是真的

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

如果您这样做，可能会发生此错误：

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

对不存在的元素调用 .html() 会返回 undefined。

【讨论】：

【解决方案2】：

library 变量（您将其用作LibraryView 的构造函数参数中的值）究竟设置为什么？它不是全局定义的，所以它可能是null。您需要先声明该变量：

var library = new Albums(),
    libraryView = new LibraryView({ collection: library })

【讨论】：