4

我遇到了一个问题，我正在添加到集合中CollectionA，在哪里CollectionA并CollectionB正在侦听添加事件。但是，添加到 时，两个集合都会触发添加事件CollectionA。 CollectionA并且CollectionB是扩展Backbone.Collection且仅设置 url 的基本集合。

查看定义

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([{...}]);

此代码将使用模型视图正确输出初始视图。然后它将正确呈现collectionViewA，但是当我触发 add 事件时，它将尝试添加到CollectionA，CollectionB因此控制台将在每次调用 add 事件时显示以下内容

Added to Collection B
Added to Collection A

它也会尝试渲染Collection B，但由于模板没有给出模型而引发错误。

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

谢谢！

4

1 回答 1

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渲染，因为这就是你告诉它要做的事情。现在会导致你渲染ModelViewAs?

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每个实例的渲染ModelViewA都会创建一个CollectionB实例（collectionB）和一个CollectionViewB实例（collectionViewB），并且collectionBfetch 有一个成功的方法来渲染collectionViewB。如果collectionB有任何模型，对于每个模型，它会在尝试呈现 ViewB 实例之前成功登录到控制台“添加到集合 B”，如果我理解正确，它会失败（这可能就是为什么你只有一个“添加到集合” B”消息。

现在至于为什么控制台日志的顺序是相反的……我仍在努力解决这个问题。也许我错过了什么。

无论如何……这种情况并不理想。不过，我不确定我可以说些什么来改进您的代码。在我看来，调用fetchfromrender就像您在渲染代码中指定了很多事情要做。我什至不确定你fetch一开始就知道那是什么。

于 2012-10-26T01:31:09.077 回答