【问题标题】:Backbone.js - How is the View finding this Collection?Backbone.js - 视图如何找到这个集合?
【发布时间】: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


【解决方案1】:

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

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

然而,这里发生了一个重要的魔法。传递给 View 构造函数的所有内容都以 View 的 options 属性结束。但是,选择数量的属性被复制到视图本身。所以你可以说this.collection 而不是this.options.collection

这些特殊属性是:

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

【讨论】:

  • 谢谢 Max - 我编辑了我的原始帖子以显示问题所在,以防其他人有同样的问题。
猜你喜欢
  • 1970-01-01
  • 2012-01-16
  • 1970-01-01
  • 1970-01-01
  • 2017-07-20
  • 1970-01-01
  • 2012-01-12
  • 1970-01-01
  • 2023-03-30
相关资源
最近更新 更多