[英]TypeError: Cannot call method 'replace' of null - Backbone.js
I'm trying to do a tutorial backbone project with peepcode, but I got stuck. 我正在尝试使用peepcode做一个教程骨干项目,但是我被卡住了。
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: 当我键入libraryView = new LibraryView({ collection: library })
在控制台中,我得到以下响应:
TypeError: Cannot call method 'replace' of null TypeError:无法调用null的方法“替换”
Can anyone help me out? 谁能帮我吗?
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
. 在不存在的元素上调用.html()
会返回undefined
。
What exactly is the library
variable (that you're using as the value in the constructor argument to LibraryView
) set to? library
变量(您用作LibraryView
的构造函数参数中的LibraryView
) LibraryView
设置为什么? It's not defined globally, so it's probably null
. 它不是全局定义的,因此可能为null
。 You'd need to first declare that variable: 您需要首先声明该变量:
var library = new Albums(),
libraryView = new LibraryView({ collection: library })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.