Question

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

我目前遇到的问题是我要显示特定项目的个人资料。

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

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

此致博多

Answer 1

我不知道这是否是最好的方式，但对于这种情况，我通过创建一个具有扩展Backbone.Events的事件属性的对象来使用应用程序级事件聚合器。

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

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

然后，您可以从视图中触发showProfile事件并绑定到mainView中的app.event，而不会冒泡所有父视图。

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

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

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

 return app;

});

我也倾向于将路由器放在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");

不过，这引入了一些样板文件，所以我也有兴趣看到这个问题的其他解决方案。

如何处理事件冒泡？

2 个答案: