在信息栏的侧栏中显示所选模型

时间:2012-08-12 23:40:14

标签: backbone.js backbone-events backbone-views

我正在开发一个右侧有侧边栏的应用程序。那显示集合。集合的每个模型都有select行为。

在页面的顶部中心,我有一个独立的主干视图,其行为类似于“信息栏”,当我选择侧边栏中的一个视图时,此视图应更新它的信息

我该怎么办?我认为侧边栏中的每个视图都应该有模型参数的“选定”事件,我的问题是如何在Backbone.js的信息栏视图中监听该更改?

1 个答案:

答案 0 :(得分:5)

这听起来像是一个事件聚合器模式可以很好地服务的东西。 Derick Bailey发表了一篇关于此事的非常好的文章,你可以在这里阅读。

Event Aggregator Pattern

我扩展了我的Backbone.View,以便所有视图都有像这样的事件聚合器对象。

Backbone.View.prototype.eventAggregator = _.extend({}, Backbone.Events);

基本上,当您选择模型视图时,view.eventAggregator将触发一些自定义事件。

sidebarView.eventAggregator.trigger('selected', this.model);

或类似的东西。使用Backbone事件,您可以通过触发器函数将参数传递给事件侦听器。在上面的例子中,我传递了具有特定事件的模型。

在您的主视图中,您正在聆听此事件。

mainView.eventAggregator.on('selected', myFunction, this);

myFunction: function(model) {
    // Some code to execute - model is available through param
}

这是一个非常有用的模式。关闭主视图时,不要忘记取消绑定事件。 : - )