Question

我正在使用this.collection.each()来迭代从后端获取的集合。

问题：我注意到，当我将集合的reset事件绑定到render方法中视图的initialize方法并放置一个console.log()中this.collection.each，我看到控制台输出正常。

但是，如果我不执行上述绑定，只需在this.render()中使用initialize，console.log()就不会输出任何内容。这对我来说真的很奇怪，任何人都可以提供解释吗？

我还在循环之前放置了console.log(this.collection);，这总是正确地输出集合！我猜测在View初始化时尚未填充该集合，但这会导致console.log(this.collection);无法显示任何内容。

此作品

SimilarPhotoListView = Backbone.View.extend({
    el: '#modal_similar_items',

    initialize: function() {
        this.collection.on('reset', this.render, this);
    },

    render: function() {
        console.log(this.collection);
        this.collection.each(function(photo, index) {
            console.log('hello');
        }, this);
        return this;
    }
});

这不会从this.collection.each（）

中输出

SimilarPhotoListView = Backbone.View.extend({
    el: '#modal_similar_items',

    initialize: function() {
        this.render();
    },

    render: function() {
        console.log(this.collection);
        this.collection.each(function(photo, index) {
            console.log('hello');
        }, this);
        return this;
    }
});

两个类都通过以下方式实例化：

renderSimilarPosts: function() {
    this.similarPhotoList = new SimilarPhotoCollection();
    this.similarPhotoListView = new SimilarPhotoListView({ collection: this.similarPhotoList });
    this.similarPhotoList.fetch({
        data: {post_id: this.model.id},
        processData: true
    });
}

Answer 1

初始化视图时，this.similarPhotoList是一个空集合。因此，当您创建similarPhotoListView时，您将向它传递一个空集合。 similarPhotoListView.initialize因此使用空集合调用render，所有这些都在fetch填充集合之前。

第一种方法有效的原因是因为reset中触发了collection.fetch。来自主干来源：

fetch:
...
    options.success = function(resp, status, xhr) {
            collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);
            if (success) success(collection, resp);
          };
...

Answer 2

initialize在实例化时运行，因此您甚至在传递集合之前运行render。此外，不应直接从render

调用initialize

this.collection.each不会这样开火（backbone.js）

2 个答案: