如何處理事件冒泡？

Question

我正在開發一個小型骨幹應用程序。

我目前遇到了問題，我想顯示特定項目的配置文件。

當我單擊列表項目時，將觸發此showProfile事件。不是showProfile事件需要通知父列表視圖，它通知上述sidebarView通知mainView現在可以實例profileView。

這將涉及事件鏈中的三到四個視圖。有沒有可能解決這個問題的解決方法？

問候， 博多

Answer 1

我不知道這是否是最好的方式，但對於這種情景，我已經通過創建有一個事件屬性的對象使用的應用程序級事件聚合器擴展Backbone.Events。

我傾向於使用同一個對象，用於存儲應用程序範圍的設置以及：

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 }); 
}); 

您可能需要閱讀德里克貝利的博客文章有關事件聚合：

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); 
} 

這將是一個基本視角，你的所有其他視圖將延伸的成員函數。所以它會在應用程序的每個視圖中都可用。因此，爲了使ParentView簡單地泡由擁有childView觸發一個事件，你只需要

bubbleEvent(childView, "event"); 

然而，這引起了一些樣板所以我也有興趣看到其他解決問題的對策。