Backbone JS:一个视图可以在其他视图中触发更新吗？

Question

在我的简单项目中,我有2个视图 - 订单项视图(品牌)和应用.我有附加功能,允许选择多个项目:

var BrandView = Backbone.View.extend({
...some code...
    toggle_select: function() {
        this.model.selected = !this.model.selected;
        if(this.model.selected) $(this.el).addClass('selected');
        else $(this.el).removeClass('selected');
        return this;
    }
});

var AppView = Backbone.View.extend({
...some code...
    delete_selected: function() {
        _.each(Brands.selected(), function(model){ 
            model.delete_selected();
        });
        return false;
    },
});

事实是,我想知道选择了多少项.在此设置中,选择不会影响模型,因此不会触发任何事件.从MVC概念来看,我理解视图不应该与其他视图直接对话.那么AppView如何知道BrandViews中正在选择某些内容？

更具体地说,我AppView知道选择了多少项,所以如果选择了多于1个,我会显示一个菜单供多个选择.

Answer 1

您可能希望阅读有关Backbone pub/sub事件的讨论:

http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

我喜欢将其添加为全局事件机制:

Backbone.pubSub = _.extend({}, Backbone.Events);

然后在一个视图中,您可以触发事件:

Backbone.pubSub.trigger('my-event', payload);

在另一个你可以听:

Backbone.pubSub.on('my-event', this.onMyEvent, this);

Answer 2

我使用了Addy Osmani所谓的中介模式http://addyosmani.com/largescalejavascript/#mediatorpattern.整篇文章非常值得一读.

基本上它是一个事件管理器,允许您订阅和发布事件.因此,您的AppView将下标到一个事件,即"已选择".然后BrandView将发布"选定"事件.

我喜欢这个的原因是它允许您在视图之间发送事件,而不会将视图直接绑定在一起.

例如

var mediator = new Mediator(); //LOOK AT THE LINK FOR IMPLEMENTATION

var BrandView = Backbone.View.extend({
    toggle_select: function() {
        ...
        mediator.publish('selected', any, data, you, want);
        return this;
    }
});

var AppView = Backbone.View.extend({
    initialize: function() {
        mediator.subscribe('selected', this.delete_selected)
    },

    delete_selected: function(any, data, you, want) {
        ... do something ...
    },
});

这样,您的应用视图就不关心它是发布'选定'事件的BrandView或FooView,只是发生了事件.因此,我发现它是一种可维护的方式来管理应用程序的各个部分之间的事件,而不仅仅是视图.

如果您进一步阅读"Facade",您可以创建一个很好的权限结构.这将允许您说只有'AppView'可以订阅我的'选定'事件.我发现这很有用,因为它非常清楚地说明了事件的使用位置.