对模型中集合的事件做出反应?

时间:2012-02-02 22:32:09

标签: javascript backbone.js coffeescript

SubCollection extends Backbone.Collection

Model extends Backbone.Model
   subcollection: new SubCollection()

model1 = new Model

model2 = new Model

model1中的集合发生更改时,我需要更新model2中的集合。它们不能作为对同一集合的引用,当一个更改我需要对更改做出反应并将其应用到另一个模型中的集合时。

我该怎么做?这很难吗?

谢谢!

1 个答案:

答案 0 :(得分:1)

好吧,

我们不能确定只有model1和model2,我们可以有一个model3和model4,所以我们实际上不能手动绑定到模型,否则你会得到这样的大混乱:

// not an option... >> huge mess :)
model1.bind('add', myFunction());
model2.bind('add', myFunction());
model3.bind('add', myFunction());

所以,我们可以做什么呢

将在我们的应用程序中实现事件聚合器。而是使用自定义事件。

// application object
var app = {
    evt: _.extend({}, Backbone.Events);
};

// subcollection
var SubCollection = Backbone.Collection.extend({
    initialize: function(){

        _.bindAll(this, "bubbleEvent", "catchBubbledEvent");

        this.bind('reset', this.myBubble);
        this.bind('add', this.myBubble);
        this.bind('reset', this.myBubble);
        //... every event you want to catch

        app.evt.bind('myCustomEvent', this.catchBubbledEvent);
    },

    bubbleEvent: function(x, y){
        // triggering a general event, passing the parameters
        app.evt.trigger('myCustomEvent', x, y, this);
    },

    catchBubbledEvent: function(x, y, originalCollection) {
        // catch any event raised on the event aggregator and cancel out the loop (don't catch events raised by this very own collection :)
        if(originalCollection.id === this.id)
            return;

       // do your stuff here ...
    }
});

//model
var myModel = Backbone.Model.extend({
    // notice me setting a unique ID in the collection, i pass in the client id of this instance of the model
    subCollection: new SubCollection({id: this.cid});
});

所以基本上我们捕获了我们想要的集合的每个事件,然后我们将它传递给我们整个应用程序的单个事件聚合器上的一般事件,任何东西都可以绑定到那个,并在适当的事件时执行操作被提出,我们的集合也可以绑定它,并做一些事情。因为你的集合可能会捕获它自己发送的事件,我们需要一个小测试来取消这些情况......并且只有在另一个集合引发此事件时才会继续。