Backbone.js - 视图如何找到这个集合?

发布于 2024-12-18 18:32:27 字数 1880 浏览 0 评论 0原文

我正在学习如何使用 Backbone.js 的教程,但我很难理解 Backbone 视图如何“查看”集合。

下面是视图代码,下面是集合代码。

我可以看到变量 $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();

另外,在路由器中有一个初始化语句传入“library”变量:

initialize: function() {
            this.libraryView = new LibraryView({
                collection: window.library
            });

现在它似乎更有意义。 :)

只是发布这个以防其他人像我一样困惑。

I'm going through a tutorial to learn how to use Backbone.js and I'm having a hard time understanding how Backbone views are "seeing" the collection.

Below is the View code, and underneath that is the Collection code.

I can see that the variable $albums is being assigned to the particular class '.albums' that is within the element, but I don't get how this code is referencing 'this.collection'.

Both the view and the collection are being extended from standard Backbone.View and Backbone.Collection classes. Just from looking at it, I can't see how they even know each other exist. I'm assuming that the word 'this' refers to this particular instance of LibraryView.

I guess this is my primary question:

How is it that the code collection = this.collection is able to see the external 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;
        }

    });

Here is the Albums collection:

// Albums Collection
    window.Albums = Backbone.Collection.extend({
        model: Album,
        url: '/albums'
    })

EDIT:


I think I found it thanks to the help here:

There was another piece of code creating a library variable and assigning it to a new albums collection:

window.library = new Albums();

Also, in the Router there is an initialize statement that passes in the 'library' variable:

initialize: function() {
            this.libraryView = new LibraryView({
                collection: window.library
            });

Now it seems to make more sense. :)

Just posting this in case someone else is as confused as I was.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

终陌 2024-12-25 18:32:27

必须将集合传递给 LibraryView 构造函数。例如,

myLibrary = new LibraryView({
  collection: new Albums()
})

然而,这里发生了一个重要的魔法。传递给 View 构造函数的所有内容最终都在 View 的 options 属性中。不过,选定数量的属性会被复制到视图本身。因此,您可以说 this.collection 而不是 this.options.collection

这些特殊属性是:

“model”、“collection”、“el”、“id”、“attributes”、“className”、“tagName”

A collection would have to be passed to the LibraryView constructor. For example,

myLibrary = new LibraryView({
  collection: new Albums()
})

However, an important bit of magic happens here. Everything passed to a View constructor ends up in the View's options property. A select number of properties though, get copied over on to the view itself. So you can say this.collection instead of this.options.collection.

Those special properties are:

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文