2012-02-07 16 views
8

Trong backbone.js documentation nó nói:backbone.js - làm việc với các trường hợp điều phối var phối = _.clone (Backbone.Events)

Để thực hiện điều phối sự kiện bằng tay có thể phối hợp các sự kiện giữa các vùng khác nhau của ứng dụng của bạn: var dispatcher = _.clone(Backbone.Events)

Bất cứ ai có thể giải thích cách triển khai điều phối viên để giao tiếp từ chế độ xem này sang chế độ xem khác không? Tôi phải đặt mã trong ứng dụng của mình ở đâu?

Trả lời

13

Đây là một bài viết hay về cách sử dụng event aggregator.

Mọi người có thể giải thích cách triển khai điều phối viên để giao tiếp từ chế độ xem này sang chế độ xem khác không? Tôi phải đặt mã trong ứng dụng của mình ở đâu?

Bạn có thể sẽ có một số loại đối tượng Trình điều khiển ứng dụng, sẽ kiểm soát luồng ứng dụng, tạo chế độ xem, mô hình, v.v. Đây cũng là nơi tốt cho trình tổng hợp sự kiện.

Từ quan điểm của tôi, tôi nghĩ rằng bài viết giải thích nó khá tốt.

0

Gần đây tôi cần một EventDispatcher để xử lý một số lượng lớn các sự kiện mà không bị mất tên của họ và hành vi của họ.

Có lẽ nó cũng giúp bạn.

Dưới đây là một ví dụ đơn giản xem:

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){ 

      } 

     }) 
    ))(); 
}); 

Ở đây EventDispatcher với một số sự kiện ví dụ. Các sự kiện chính nó được xác định trước trong đối tượng mẫu. IDE của bạn sẽ nhận ra chúng và dẫn bạn qua danh sách.

Như bạn có thể thấy, Dispatcher tự chạy. Chỉ View của bạn hoặc bất cứ điều gì cần cơ bản Phương thức sự kiện từ Backbone.

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

}); 

Hành vi của Backbones Hệ thống sự kiện không bị ảnh hưởng theo bất kỳ cách nào và có thể được sử dụng như bình thường.

Các vấn đề liên quan