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

Kar*_*ski 2 backbone.js backbone-events backbone-views

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

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

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

jmk*_*142 5

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

事件聚合器模式

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

Backbone.View.prototype.eventAggregator = _.extend({}, Backbone.Events);
Run Code Online (Sandbox Code Playgroud)

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

sidebarView.eventAggregator.trigger('selected', this.model);
Run Code Online (Sandbox Code Playgroud)

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

在主视图中,您将收听此事件.

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

myFunction: function(model) {
    // Some code to execute - model is available through param
}
Run Code Online (Sandbox Code Playgroud)

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