Phi*_*egg 3 javascript jquery backbone.js underscore.js
我正在通过一个教程来学习如何使用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;
}
});
Run Code Online (Sandbox Code Playgroud)
这是专辑集合:
// Albums Collection
window.Albums = Backbone.Collection.extend({
model: Album,
url: '/albums'
})
Run Code Online (Sandbox Code Playgroud)
编辑:
我想我找到了感谢这里的帮助:
还有另一段代码创建了一个库变量并将其分配给一个新的专辑集合:
window.library = new Albums();
Run Code Online (Sandbox Code Playgroud)
此外,在路由器中有一个初始化语句,它传入'library'变量:
initialize: function() {
this.libraryView = new LibraryView({
collection: window.library
});
Run Code Online (Sandbox Code Playgroud)
现在它似乎更有意义.:)
只是张贴这个以防万一其他人像我一样困惑.
必须将集合传递给LibraryView构造函数.例如,
myLibrary = new LibraryView({
collection: new Albums()
})
Run Code Online (Sandbox Code Playgroud)
然而,这里有一点重要的魔力.传递给View构造函数的所有内容都以View的options属性结束.但是,选定数量的属性会被复制到视图本身.所以你可以说this.collection而不是this.options.collection.
这些特殊属性是:
'model','collection','el','id','attributes','className','tagName'
| 归档时间: |
|
| 查看次数: |
2841 次 |
| 最近记录: |