backbone.js - работа с диспетчером событий var dispatcher = _.clone (Backbone.Events) - PullRequest
8 голосов
/ 07 февраля 2012

В backbone.js документации написано:

Чтобы создать удобный диспетчер событий, который может координировать события между различными областями вашего приложения: var dispatcher = _.clone(Backbone.Events)

Может кто-нибудь объяснить, как реализовать диспетчер для общения из одного представления в другое? Где мне разместить код в моем приложении?

Ответы [ 2 ]

13 голосов
/ 07 февраля 2012

Вот хорошая статья об использовании агрегатора событий .

Может кто-нибудь объяснить, как реализовать диспетчер для связи из одного представления в другое? Где мне разместить код в моем приложении?

Вероятно, у вас будет какой-то объект App Controller, который будет управлять потоком приложения, создавая представления, модели и т. Д. Это также хорошее место для агрегатора событий.

С моей точки зрения, я думаю, что эта статья объясняет это довольно хорошо.

0 голосов
/ 03 декабря 2016

Недавно мне понадобился 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 должна их распознать и провести по списку.

Как вы можете видеть, Диспетчер запускается самостоятельно.Только для вашего View или того, что нужно, лежат в основе методов Event из 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;
    }

});

На поведение Event-системы Backbones это никак не влияет и может использоваться как обычно.

...