如何处理事件冒泡？

Question

我正在开发一个小型的主干应用程序。

我目前遇到了一个问题，我想要显示一个特定项目的个人资料。

此showProfile事件在我单击列表项时触发。showProfile事件不需要通知父listView，父sidebarView通知上面的sidebarView，后者通知mainView现在可以实例化profileView。

这将涉及事件链中的三到四个视图。有没有可能解决此问题的方法？

致敬，博多

Answer 1

我倾向于使用相同的对象来存储应用程序范围的设置：

var app = {
    settings: {},
    events: _.extend({}, Backbone.Events),
};

然后，您可以从视图中触发showProfile事件并绑定到mainView中的app.event，而无需遍历所有父视图。

在使用RequireJS时，我创建了一个应用程序模块，它是我的视图的依赖项：

define([
    "jquery",
    "underscore",
    "backbone"
],

function($, _, Backbone) {
   var app = {
       root: "/",
       settings: {},
       events: _.extend({}, Backbone.Events),
   };

 return app;

});

我也倾向于将我的路由器放在应用程序对象上，以防我需要在视图中访问它，所以在我的main.js中(就像在backbone-boilerplate中)：

require([
   "app",
   "router",
],

function(app, Router) {
    app.router = new Router();
    Backbone.history.start({ pushState: true, root: app.root });
});

您可能想要阅读Derick Bailey关于事件聚合器的博客文章：

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

http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/

Answer 2

同意，在这类事情中有很多样板文件。我尝试过的一种方法是通过使用如下定义的(视图)方法来最小化这种情况：

/**
 * Helper to facilitate event-bubbling, that is to say, the scenario where a view
 * binds a callback to a child-View event only to retrigger it, mimicking the
 * inherent event bubbling mechanism of the DOM. Allows renaming of the bubbled
 * event as well as modification of the bubbled arguments
 *
 * @param view The View-dispatcher of the event
 * @param ev Name of the event to bubble
 * @param opts A hash of options where:
 *   bubbleName: New name of the event to bubble in case the event should be
 *   renamed. Optional
 *   args: The arguments to bubble:
 *    - When absent, the original arguments will be bubbled.
 *    - When set to a non-function value or an array-of-values, this value or
 *      values will be bubbled
 *    - When set to a function, it will be invoked on the incoming arguments and
 *      its returned value will be treated as in the previous case.
 */
bubbleEvent: function (view, ev, opts) {
  if (!opts) { opts = {}; }
  view.bind(ev, function () {
    var inArgs = _.toArray(arguments),
        bubbleArgs = _.isFunction(opts.args) ? 
          opts.args.apply(this, inArgs) : (opts.args || inArgs),
        bubbleName = opts.bubbleName || ev;
    this.trigger.apply(this, [bubbleName].concat(bubbleArgs));
  }, this);
}

这将是BaseView的成员函数，您的所有其他视图都将对其进行扩展。因此，它将在应用程序的每个视图中都可用。因此，为了让ParentView简单地冒泡由拥有的childView触发的事件，您只需要

bubbleEvent(childView, "event");

尽管如此，这还是引入了一些样板，所以我也有兴趣看到这个问题的其他解决方案。