Backbone.js - How is the View finding this Collection?
我正在通过教程学习如何使用Backbone.js,并且很难理解Backbone视图如何"查看"集合。
下面是"查看"代码,下面是"收集"代码。
我可以看到变量$ albums被分配给元素内的特定类'.albums',但是我不明白该代码如何引用'this.collection'。
视图和集合都从标准Backbone.View和Backbone.Collection类扩展。单看来看,我什至看不出他们之间是如何认识彼此的。我假设单词" this"是指LibraryView的这个特定实例。
我想这是我的主要问题:
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | // 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; } }); |
这是相册集合:
1 2 3 4 5 | // Albums Collection window.Albums = Backbone.Collection.extend({ model: Album, url: '/albums' }) |
编辑:
我想我在这里得到了帮助:
还有另一段代码创建一个库变量并将其分配给一个新的专辑集合:
1 | window.library = new Albums(); |
此外,在路由器中还有一个初始化语句,该语句传递了'library'变量:
1 2 3 4 | initialize: function() { this.libraryView = new LibraryView({ collection: window.library }); |
现在看来更有意义。 :)
只是发布此内容,以防其他人像我一样困惑。
必须将集合传递给LibraryView构造函数。例如,
1 2 3 | myLibrary = new LibraryView({ collection: new Albums() }) |
但是,这里发生了很多重要的魔术。传递给View构造函数的所有内容最终都在View的
这些特殊属性是:
'model','collection','el','id','attributes','className','tagName'