Question

我遇到了一个问题，我正在添加一个集合CollectionA，其中CollectionA和CollectionB正在侦听添加事件。但是，在添加到CollectionA时，会为两个集合触发添加事件。 CollectionA和CollectionB是扩展Backbone.Collection并仅设置网址的基本馆藏。

查看定义

ModelViewA = Backbone.View.extend({
    ...
    render : function() {
        var self       = this;
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));

        var collectionB     = new CollectionB();
        var collectionViewB = new CollectionViewB();
        collectionB.fetch({
            self.$el.append(collectionViewB.render().el);
        });

        return this;
    },
    ...
});

CollectionViewA = Backbone.View.extend({
    initialize : function() {
       this.collection.on('add', this.renderOne, this);
    },
    ...
    render : function() {
       this.collection.forEach(this.renderOne, this);
       return this;
    },

    renderOne : function(model) {
        console.log('Added to Collection A');

        var view = new ViewA({ model : model });
        this.$el.append(view.render().el);
        return this;
    }
});

CollectionViewB = Backbone.View.extend({
    initialize : function() {
       this.collection.on('add', this.renderOne, this);
    },
    ...
    render : function() {
       this.collection.forEach(this.renderOne, this);
       return this;
    },

    renderOne : function(model) {
        console.log('Added to Collection B');

        var view = new ViewB({ model : model });
        this.$el.append(view.render().el);
        return this;
    }
});

以下是我从这些事件的级联开始......

var collectionA = new CollectionA();
var modelViewA = new ModelViewA({
    model : collectionA.at('some id');
});

$('body').append(modelViewA.render().el);
$('body').empty();

var collectionViewA = new CollectionViewA({ collection: collectionA });
$('body').append(collectionViewA.render().el);
collectionViewA.add([{...}]);

此代码将使用modelView正确输出初始视图。然后它会正确呈现collectionViewA，但是当我触发添加事件时，它会尝试添加到CollectionA和CollectionB，这样每次添加事件时控制台都会显示以下内容称为

Added to Collection B
Added to Collection A

它还会尝试渲染Collection B，但会抛出错误，因为模板没有给出模型。

让我知道这是否太令人困惑，我可以尝试更多地删除这个描述。

谢谢！

Answer 1

为什么在ModelViewA的渲染方法中，是否创建了一个提取的CollectionB实例？

    var collectionB     = new CollectionB();
    var collectionViewB = new CollectionViewB();
    collectionB.fetch({
        self.$el.append(collectionViewB.render().el);
    });

甚至没有解析。你确定你不小心编辑了匿名成功函数吗？首先让我想一下，这不是你的代码所显示的。也就是说，它应该是这样的：

    collectionB.fetch({
        success: function(){
           self.$el.append(collectionViewB.render().el);
        }
    });

我们一起去吧。

所以，当呈现ModelViewA时，显然 collectionB将会获取某些内容，然后collectionViewB将会呈现，因为这就是你的意思告诉它做。现在会让你渲染ModelViewA s？

CollectionViewA = Backbone.View.extend({
    initialize : function() {
       this.collection.on('add', this.renderOne, this);
    }, ...

renderOne : function(model) {
    console.log('Added to Collection A');

    var view = new ViewA({ model : model });
    this.$el.append(view.render().el);
    return this;
}

这是什么ViewA？那还可以参考ModelViewA吗？

如果是这样，我们可能会猜测发生了什么：

您的CollectionViewA实例会在每次添加时呈现ModelViewA个实例。 aa ModelViewA实例的每次呈现都会创建CollectionB实例（collectionB）和CollectionViewB实例（collectionViewB），而collectionB fetch会创建一种呈现collectionViewB的成功方法。如果collectionB有任何模型，对于每个模型，它在尝试渲染ViewB实例之前成功登录到控制台“添加到集合B”，如果我理解正确，则失败（这可能就是为什么你只有一个“添加到收集B”消息。

现在为什么控制台日志的顺序是相反的......我仍然试图找出那个。也许我错过了什么。

无论如何......这种情况并不理想。不过，我不确定我能改进你的代码。在fetch中调用render似乎就像您在渲染代码中指定了很多事情一样。我甚至不确定你是否知道fetch是从那里开始的。

BackboneJS集合添加了在多个集合上触发的事件

1 个答案: