JavascriptMVC: Listen to event of instantiated Controller in wrapper Controller

Question

I have 2 controllers:

$.Controller('App.Browse',
/** @Static */
{
    defaults : {}
},
/** @Prototype */
{
    init : function(){
        $('#map').app_map();
    },
    // how can I listen here for an event of app_map() controller
})

and

$.Controller('App.Map',
/** @Static */
{
    defaults : {}
},
/** @Prototype */
{
    init : function(){
        // how can I trigger an event to be listened by app_browser() controller
    },
})

The short idea is that while i'm in the App.Map controller I would like to notice the App.Browse controller to do something.

Answer 1

JMVC is prepared for that. Just declare it like this:

$.Controller('App.Browse',
/** @Static */
{
    defaults : {
        mapController: null
    },
    listensTo: ['mapCustomEvent']
},
/** @Prototype */
{
    init : function(){
        $('#map').app_map();
    },

    '{mapController} mapCustomEvent': function(element, event, param) {
        //handle event
    }
})

$.Controller('App.Map',
/** @Static */
{
    defaults : {}
},
/** @Prototype */
{
    init : function(){
        param = "something I'd like to pass into event listener";
        $(this).trigger('mapCustomEvent', params);
    }
})

And instantiate:

map = new App.Map('#map');
new App.Browse($('#browse'), {mapController: map});

Answer 2

You could try something along these lines:

window.createEventManager = (function() {

var Event = function(manager, name) {
    this.name = name;
    this._manager = manager;
    this._listeners = [];
};

Event.prototype = {
    listen: function(fn) {
        if (!$.isFunction(fn)) {
            throw "fn is not a function.";
        }

        this._listeners.push(fn);
    },

    fire: function(args) {
        args = args || {};
        args.name = this.name;

        var ls = this._listeners;
        for (var i = 0, l = ls.length; i < l; ++i) {
            ls[i](args);
        }

        this._manager.fire(args);
    }
};


var EventManager = function(eventNames) {
    for (var n in eventNames) {
        this[eventNames[n]] = new Event(this, eventNames[n]);
    }

    this._listeners = [];
};

EventManager.prototype = {
    /**
     * Listen to all events
     * @param fn
     */
    listen: function(fn) {
        if (!$.isFunction(fn)) {
            throw "fn is not a function.";
        }

        this._listeners.push(fn);
    },

    fire: function(args) {
        var ls = this._listeners;
        for (var i = 0, l = ls.length; i < l; ++i) {
            ls[i](args);
        }
    },

    getEvent: function(name){
        return this[name];
    }
};

return function(eventNames) {
    return new EventManager(eventNames);
};
})();

in the map controller:

init : function(){
    events = createEventManager(["mapTrigger"]);
},

and in the browser listen to it by:

  $('#map').app_map().events.getEvent("mapTrigger").listen(function(){
        // Logic to perform on trigger.
  });