¿Cómo extender la delegación de eventos en javascript con patrón de módulo?

I am using module pattern in JavaScript. I have a file say controller.js which handles events. The problem is I want to use sub-modules. But since the events are handled in the controller.js how will I handle the event in the sub-module if any arises?
I dispatch a custom event called PAGE_DISPLAYED from another file say view.js. This event is listened by the controller.js and depending on the displayed page, it does other things, like binding additional event handler specific to that particular page. How to do this using sub-modules.

Código de muestra:

window.KDJ || (window.KDJ = {});    //namespace
KDJ.controller = (function () {
    $(document).off('PAGE_DISPLAYED');
    $(document).on('PAGE_DISPLAYED', function (e, data) {
    switch(data.pageId) {
    case "page1":
        // do something..
        break;
    case "page2":
        // do something..
        break;
    }
    });

    return {
        // exported methods and props..
    };
})();

How can I extend the above code and the event delegation? Or is the code architecture posing any restrictions.

I am using jQuery Mobile and dispatching the PAGE_DISPLAYED event is done by listening to pagechange evento:

window.KDJ || (window.KDJ = {});    //namespace
KDJ.view = (function () {  
    // ...
    $(document).off('pagechange');
    $(document).on('pagechange', function (e, ui) {
        //...
        $(document).trigger(PAGE_DISPLAYED, {'pageId': loadedPageId, 'key': key});
    });
})();

Gracias.

preguntado el 31 de julio de 12 a las 13:07

What do you do to dispatch the events? -

Nicosunshine: Updated the question to include the dispatch event code. -

Ok, I think you could get around it if you can pass a function to the trigger, that will know how to handle the event (preferably in a polimorfic way). If you want I could post some code :) (sorry for the delay) -

Nicosunshine: Wow! Beautiful idea. Yes, I can pass a function from the view, or at least pass a property added to the key and in the controller I can check if the key.thatProp is present and if present don't go through the switch statement etc. Here I can trigger another event which will be listened by the sub-module and it can handle it. But there is a problem, if I handle in a polymorphic way. How can I add multiple listeners to the same event? Could you please post some code. -

Yes I can!, but I have to sleep. I'll post what I suppouse I would do in that situation tomorrow(it's quite late here :P). I'm sorry if you need this with some urgency, I hope you can wait a little bit. Good luck. -

1 Respuestas

Ok, I tought a few possibilities but in terms of readability the one I like the most is:

window.KDJ || (window.KDJ = {});    //namespace
KDJ.controller = (function () {
    $(document).off('PAGE_DISPLAYED');
    $(document).on('PAGE_DISPLAYED', function (e, data) {

        //Use the Id if it exsits, if not, try to execute the function
        switch(data.pageId) {
            case "page1":
                // do something..
                break;
            case "page2":
                // do something..
                break;
            default: 
                if(data.customFunction)
                    data.customFunction();
                break;
        }

    });

    return {
        // exported methods and props..
    };
})();


KDJ.view = (function () {  
    // ...
    $(document).off('pagechange');


    $(document).on('pagechange', function (e, ui) {

        //the function will be executed
        $(document).trigger(PAGE_DISPLAYED, {
            customFunction = function(ui) {
                console.log("I'm doing something awesome with the ui!");
            }
        });

    });

    $(document).on('pagechange', function (e, ui) {

        //here I'll use the switch
        $(document).trigger(PAGE_DISPLAYED,  {
            'pageId': loadedPageId, 
            'key': key
        });

    });
})();

Aquí you have another option, without the default. Tell me if one fits your needs :)

Respondido 02 ago 12, 20:08

En la pestaña controller we can use data.customFunction() if undefined. The function definition will be present in the sub-module I load later before the above condition executes. Or I can bind the PAGE_DISPLAYED event in the sub-module and check if the function is present and do necessary stuff. Thanks! - user235273

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.