如何使用pubsub和backbone.js聚合事件數據？

Question

我正在構建一個帶有backbone.js的小型預訂計算器，它主要響應用戶輸入而基於操作靜態數據集。 我將應用程序划分為單獨的組件，例如：

1. 包
2. 日歷
3. 票
4. TotalCostView

最后一個組件TotalCostView是最重要的。 它根據上面列表中提到的其他組件發布的事件數據輸出預訂的最終成本。 現在我使用一個簡單的jQuery pub子實現作為我的全局事件總線：

  /* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
 * http://benalman.com/
 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */

  var o = $({});

  $.subscribe = function() {
    o.on.apply(o, arguments);
  };

  $.unsubscribe = function() {
    o.off.apply(o, arguments);
  };

  $.publish = function() {
    o.trigger.apply(o, arguments);
  };

這很好地期望一件事：我無法訪問計算最終totalCost所需的聚合數據。

所以當我發布這樣的事件時：

var SelectListView = Backbone.View.extend({

  events: {
      'change': 'pkgSelected'
  },

  pkgSelected: function(ev){
     $.publish('pkg/changed', selectedPkg);
  },

});

我訂閱它是這樣的：

$.subscribe('pkg/changed', _.bind(this.updatePackageAmount, this));

我得到當前選定的包數據。 問題是我無法獲取應用程序的其他部分發布的數據，如：

$.publish('car/selected', selectedCar);
$.publish('numTickets/changed', ticketData);

我無法在一個地方聚合所有數據進行計算，如：

  updatePackageAmount: function(ev, numTickets, travelCost, currentDate){ // I need the data passed in as parameters to be always fresh

    var totalCost = parseInt(cost * numTickets, 10) + parseInt(travelCost, 10);
    this.render(totalCost);
  }, 

如果沒有一個組件知道另一個組件，我如何聚合數據？ 我應該使用某種合理的全局App對象來存儲這種常見的共享數據嗎？ 如果是這樣，我該怎么做？

Answer 1

從Backbone v0.9.9開始，全局Backbone.Events對象混合了Backbone事件行為 ，因此您可以將該對象用作全局事件總線。 擁有某種全球事件總線以將所有行為聯系在一起是一種非常常見的模式。 如果沒有一個，我認為你會創建一種某種類型的所有權層次結構，其中更高級別的對象會從子項中冒出事件並從子級觸發更高級別的事件。

我認為事件總線方法在一個小應用程序中可能更容易處理：

var SelectListView = Backbone.View.extend({

  events: {
      'change': 'pkgSelected'
  },

  pkgSelected: function(ev){
     // : is commonly used for event namespacing in Backbone, but feel
     // free to keep using /
     Backbone.Events.trigger('pkg:change', selectedPkg);
  },

});

// Your total view
var SomeOtherView = Backbone.View.Extend({
    initialize: function() {
        var _this = this;
        // If you use listenTo, the event listener will automatically be
        // disabled when your view is removed
        this.listenTo(Backbone.Events, 'pkg:change', function(selectedPkg) {
            _this.selectedPkg = selectedPkg;
        });
    }
)};

您甚至可以使用Backbone.Model來存儲所有選項的結果：您的控制器可以監聽Backbone.Event更改，在模型本身上設置適當的字段，然后您的視圖可以監聽模型上的更改事件適當地重新渲染自己。

無論如何， Backbone.Marionette提供了一個合適的全局應用程序對象（ Marionette.Application ），它可能適用於您的情況（除了用於構建Backbone應用程序的許多其他非常好的組件）。