【问题标题】:Backbone.js: communication between viewsBackbone.js:视图之间的通信
【发布时间】:2011-11-21 02:07:39
【问题描述】:

我正在开发一个包含条目列表的 Backbone 应用程序,类似于示例应用程序 Todos (http://documentcloud.github.com/backbone/examples/todos/index.html)。

所以,我有一个应用视图和每个列表项一个视图。现在,假设我有一个全局编辑按钮。 App 视图将处理一次点击,然后我想要做的是告诉每个列表视图显示一个删除按钮。

在下面的屏幕截图中(来自 Spotify),按下“编辑”按钮会导致所有列表视图的外观发生变化。

使用 Backbone 执行此操作的最佳方法是什么。我需要遍历所有列表视图并调用 editMode 函数。但是应用程序视图(开箱即用)不知道列表视图..

【问题讨论】:

  • 我来这里是为了问同样的问题,但碰巧在我的首页上看到了你的问题……吓人。

标签: views backbone.js


【解决方案1】:

我的两分钱:有一个简单的“hack”,您可以使用backbone.js 来实际拥有一个可以在视图之间进行通信的发布/订阅:

类似的东西(未经测试):

var EventBus = Backbone.Model.extend({

   publish: function(event, args){

       this.trigger(event, args);

   },

   subscribe: function(event, args) {

       this.bind(event, args);

   }
});

你基本上明白了。现在对于每个视图,将其“绑定”到这个 EventBus(因为视图只能绑定到主干中的模型/集合) - 您基本上只需使用方法名称发布/订阅与此类模型的命名法同步,但是您可以选择不。在这种情况下,只需创建一个空的 EventBus 'class' 并让每个视图都绑定到它:)

所以每个视图只需要耦合到这个EventBus 并根据收到的事件采取行动! Backbone.js 在内部处理此设计模式的所有管道,因此您几乎可以免费获得它:)

上面的代码可能无法按原样运行,但是否可以让您对此有所了解...

【讨论】:

  • Backbone.Events 已经有了,为什么不保持干燥?
  • @opengrid - 这是针对 v0.5.1 的。当它“如何使用事件”没有得到很好的宣传时:)
【解决方案2】:

我不久前写了一篇文章,介绍了在视图之间协调的几种不同选项:http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

在您的情况下,我建议使用我在该文章中描述的事件聚合器。您可以让每个项目视图侦听“编辑模式”事件或类似事件。当这个事件触发时,每个监听它的视图都会更新自己进入编辑模式。那么当你点击“完成”时,你会做相反的事情——发送一个“viewmode”事件或类似的东西,并让每个视图适当地更新自己。

【讨论】:

  • 假设,对于问题中的示例,每个轨道的视图都有对轨道集合的引用。直接或通过支持每个轨道视图的轨道模型的属性。通过这个集合发送“editmode”事件会不会出错?这样您就不需要单独的事件对象来促进这一点。
  • “错误”是非常主观的。这取决于您的应用程序所涉及的复杂性,以及您的应用程序需要走多远的解耦路径。您可以先通过集合传递它,看看它是否适合您。如果您开始看到所有东西都过于紧密耦合,请重组以使用单独的事件对象。
  • @DerickBailey - 非常喜欢您在文章中描述的模式。感谢分享。
  • Sheepdog 的 Thurloat 为您的解决方案发布了一个非常鼓舞人心的扩展,他建议使用 view factory。他的建议允许 1) 消除将 eventBus 显式传递给每个视图的需要(或声明 eventBus 全局)和 2) 以声明性主干方式声明全局事件绑定,这是对可读性的巨大改进。这是完整的文章thurloat.com/2012/01/21/… - 在coffeescript中
  • 我遇到了类似的问题,并且喜欢您的事件聚合器想法。 tnx
猜你喜欢
  • 1970-01-01
  • 2012-06-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-10
  • 2012-07-01
  • 2012-03-02
相关资源
最近更新 更多