AEM DOM Based Routing

gistfile1.txt

        /*
         AEM DOM BASED ROUTING SECTION
         The data-controller attribute should point to the module defined JS controller (required)
         The data-action attribute should reference a method of that controller, which will be passed an array of dom elements .
            (Defaults to init)
         The data-config object should contain a JSON object with configuration parameters (optional)
         See http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/ for inspiration
         ex: <div id="${divId}"
                 data-composer='foo'
                 data-action='doit'
                 data-config='{"height": "${height}", "width": "${width}"}'>
                 
         Will invoke...
                 foo.doit();
        
         On...
                foo = {
                  init : function(){ ... },
                  doit : function(){ ... }
                }
         */

        var grouped = _.groupBy($('[data-controller]'), function (elem) {
            var $elem = $(elem);
            return $elem.data("controller") + "." + ($elem.data("action") ? $elem.data("action") : 'init');
        });

        _.forIn(grouped, function(domArray, method) {
            if (eval('typeof ' + method) == 'function'){
                eval(method)(domArray);
            }else{
                console.log("Could not evaluate the function call for object / method pair named " + method);
            }
        });

John Dorrance is the author, all credit goes to him 😄