【发布时间】:2011-11-29 19:52:59
【问题描述】:
我正在学习如何使用 Backbone.js 的教程,但我很难理解 Backbone 视图是如何“看到”集合的。
下面是 View 代码,下面是 Collection 代码。
我可以看到变量 $albums 被分配给元素内的特定类“.albums”,但我不明白这段代码是如何引用“this.collection”的。
视图和集合都是从标准 Backbone.View 和 Backbone.Collection 类扩展而来的。光是看,我都看不出他们是怎么知道彼此存在的。我假设“this”这个词指的是 LibraryView 的这个特定实例。
我想这是我的主要问题:
代码collection = this.collection怎么能看到外部集合?
// A wrapper view to display each album in Library
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;
}
});
这是专辑收藏:
// Albums Collection
window.Albums = Backbone.Collection.extend({
model: Album,
url: '/albums'
})
编辑:
感谢这里的帮助,我想我找到了它:
还有一段代码创建了一个库变量并将其分配给一个新的专辑集合:
window.library = new Albums();
另外,在路由器中,有一个初始化语句传入“库”变量:
initialize: function() {
this.libraryView = new LibraryView({
collection: window.library
});
现在它似乎更有意义了。 :)
只是发布这个以防其他人和我一样困惑。
【问题讨论】:
-
找到初始化视图的位置(在路由器中?)。您可能在集合中传递。
-
我也在关注 Peepcode 教程!并且有完全相同的问题。我相信混乱来自视频的飞跃,其中视图之前是在 Chrome 的控制台中构建的,但视频剪辑和集合是在路由器构造函数中分配的。
标签: javascript jquery backbone.js underscore.js