BACKBONE.JS - イベントディスパッチャのVARディスパッチャ= _.clone（Backbone.Events）での作業<a href="http://documentcloud.github.com/backbone/" rel="nofollow noreferrer"><code>backbone.js</code> documentation</a>で

Question

それは言う：

アプリケーションの異なる領域間でイベントを調整できる便利なイベントディスパッチャを作成するには：var dispatcher = _.clone(Backbone.Events)

ディスパッチャを実装して1つのビューから別のビューに通信する方法を説明できる人はいますか？アプリケーションにコードを配置する場所はどこですか？

Answer 1

ここにはevent aggregatorの使用に関する良い記事があります。

ディスパッチャを実装して1つのビューから別のビューに通信する方法を説明できる人はいますか？アプリケーションにコードを配置する場所はどこですか？

あなたはおそらくアプリケーションの流れを制御し、ビュー、モデルなどを作成するApp Controllerオブジェクトを持っています。これはイベントアグリゲータにとっても良い場所です。

私の見解では、記事ではかなりうまく説明していると思います。

Answer 2

最近、大量のイベントを処理するために、名前のトラックやその動作を失うことなくEventDispatcherが必要でした。

おそらくそれもあなたを助けます。ここでは簡単な例を見る

：いくつかの例のイベントとここ

define(['backbone', 'underscore', 'eventDispatcher'], 
    function(Backbone, _, dispatcher){ 

     new (Backbone.View.extend(_.extend({ 
      el: $('#anyViewOrWhatever'), 
      initialize: function() { 
       window.addEventListener('resize', function() { 
        // trigger event 
        dispatcher.global.windowResize.trigger(); 
       }); 

       // create listener 
       dispatcher.server.connect(this, this.doSomething); 

       // listen only once 
       dispatcher.server.connect.once(this, this.doSomething); 

       // remove listener: 
       dispatcher.server.connect.off(this, this.doSomething); 
       // remove all listener dispatcher.server.connect from this: 
       dispatcher.server.connect.off(null, this); 
       // remove all listener dispatcher.server.connect with this method: 
       dispatcher.server.connect.off(this.doSomething); 
       // remove all listener dispatcher.server.connect no matter what and where: 
       dispatcher.server.connect.off(); 

       // do the same with a whole category 
       dispatcher.server.off(/* ... */); 

       // listen to all server events 
       dispatcher.server.all(this, this.eventWatcher); 

      }, 
      doSomething: function(){ 

      }, 
      eventWatcher: function(eventName){ 

      } 

     }) 
    ))(); 
}); 

のEventDispatcher。イベント自体は、テンプレートObjectで事前定義されています。あなたのIDEはそれらを認識し、あなたをそのリストに導きます。

ご覧のとおり、Dispatcherは単独で実行されます。あなたのビューか、バックボーンの基礎となるイベントメソッドが必要なものだけ。

// module eventDispatcher 
define(['backbone', 'underscore'], function (Backbone, _) { 

    var instance; 
    function getInstance() { 
     if (!instance) { 
      instance = createInstance(); 
     } 
     return instance; 
    } 
    return getInstance(); 

    function createInstance() { 
     // dummy function for your ide, will be overwritten 
     function e (eventContext, callback) {} 
     var eventHandler = {}, 

      // feel free to put the template in another module 
      // or even more split them in one for each area 
      template = { 
       server: { 
        connect: e, 
        disconnect: e, 
        login: e, 
        logout: e 
       }, 
       global: { 
        windowResize: e, 
        gameStart: e 
       }, 
       someOtherArea: { 
        hideAll: e 
       } 
      }; 

     // Create Events 
     _.each(template, function (events, category) { 
      var handler = eventHandler[category] = _.extend({}, Backbone.Events); 
      var categoryEvents = { 
       // turn off listener from <category>.<**all events**> with given _this or callback or both: 
       // off() complete purge of category and all its events. 
       // off(callback) turn off all with given callback, no matter what this is 
       // off(null, this) turn off all with given this, no matter what callback is 
       // off(callback, this) turn off all with given callback and this 
       off: function (callback, _this) { 
        if(!callback && _this){ 
         handler.off(); 
        }else{ 
         _.each(template[category], function(v, k){ 
          k != 'off' && template[category][k].off(callback, _this); 
         }); 
        } 
       } 
      }; 
      events.all = e; 
      _.each(events, function (value, event) { 
       // create new Listener <event> in <category> 
       // e.g.: template.global.onSomething(this, fn); 
       categoryEvents[event] = function (_this, callback) { 
        _this.listenTo(handler, event, callback); 
       }; 
       // create new Listener <event> in <category> for only one trigger 
       // e.g.: template.global.onSomething(this, fn); 
       categoryEvents[event].once = function (_this, callback) { 
        _this.listenToOnce(handler, event, callback); 
       }; 
       // trigger listener 
       // e.g.: template.global.onSomething.trigger(); 
       categoryEvents[event].trigger = function (debugData) { 
        console.log('**Event** ' + category + '.' + event, debugData ? debugData : ''); 
        handler.trigger(event); 
       }; 
       // turn off listener from <category>.<event> with given _this or callback or both: 
       // off() complete purge of category.event 
       // off(callback) turn off all with given callback, no matter what this is 
       // off(null, this) turn off all with given this, no matter what callback is 
       // off(callback, this) turn off all with given callback and this 
       // e.g.: template.global.onSomething.off(fn, this); 
       categoryEvents[event].off = function (callback, _this) { 
        handler.off(event, callback, _this); 
       } 

      }); 
      template[category] = categoryEvents; 
     }); 

     return template; 
    } 

}); 

バックボーンイベントシステムの動作は何らかの影響を受けず、通常どおり使用できます。