关于javascript:Backbone.js-视图如何找到该集合?

Backbone.js - How is the View finding this Collection?

我正在通过教程学习如何使用Backbone.js,并且很难理解Backbone视图如何"查看"集合。

下面是"查看"代码,下面是"收集"代码。

我可以看到变量$ albums被分配给元素内的特定类'.albums',但是我不明白该代码如何引用'this.collection'。

视图和集合都从标准Backbone.View和Backbone.Collection类扩展。单看来看,我什至看不出他们之间是如何认识彼此的。我假设单词" this"是指LibraryView的这个特定实例。

我想这是我的主要问题:

代码collection = this.collection如何能够看到外部集合?

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的options属性中。但是,选择了一些属性,然后将其复制到视图本身。因此,您可以说this.collection而不是this.options.collection

这些特殊属性是:

'model','collection','el','id','attributes','className','tagName'