azicchetti / jquerymobile-router

A router/controller for jquery mobile. Also adds support for client-side parameters in the hash part of the url. The routes handles regexp based routes. This plugin can be used alone or (better) with Backbone.js or Spine.js, because it's originally meant to replace their router with something integrated with jQM.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Adding handlers and events to router

satyasuman opened this issue · comments

Hi, can we add the events and the handler objects like the below

var eventsAndMethods = {};
eventsAndMethods.test = {};
eventsAndMethods.events = "bs";
eventsAndMethods.handler = "showIndexPage"; // This method will be available in the handlerObj

jqmRouterInstance.add([eventsAndMethods], handlerObj);

This is in continuation to the above question.I am trying to implement a wrapper over the jqmRouter for my application

var baseRouter =  (function(){
    var routeControllerObjStore = [];
    var jqmRouterInitialized = false;
    var registeredBeforeInitialize = false;
    var baseRouter = {
        version: "0.1",
        registerRouteController: function (routeControllerObj, handlerEventObjsArray) {
            registeredBeforeInitialize = !jqmRouterInitialized;
            var handlerEventArray = new RouterHelper(handlerEventObjsArray).processEventsObj();
            routeControllerObjStore.push({"controller":routeControllerObj, "handlerEventArray":handlerEventArray});
            if(jqmRouterInitialized)
                this.addToRouter(handlerEventArray, routeControllerObj);
        },
        addToRouter: function(handlerEventArray, routeControllerObj){
            this.jqmMobileRouter.add(handlerEventArray, routeControllerObj);
        },
        initializeRouter: function(){
            this.jqmMobileRouter = new $.mobile.Router();
            jqmRouterInitialized = true;
            var tempStore = routeControllerObjStore;
            routeControllerObjStore = [];
            if(registeredBeforeInitialize){
                $.each(tempStore, function(index, controllerObj){
                    baseRouter.addToRouter(controllerObj.handlerEventArray, controllerObj.controller);
                })
            }
        }
    }
    var RouterHelper = function(handlerEventObjsArray){
        this.processEventsObj = function(){
            var jqmRouteControllerObj = {};
            $.each(handlerEventObjsArray, function(index, handlerEventObj){
                jqmRouteControllerObj[handlerEventObj.url] = {handler:handlerEventObj.handler, events: handlerEventObj.events.join(",")};
            });
            return [jqmRouteControllerObj];
        }
    }
    return baseRouter;
});

RouteController = RouteController.extend({
name: "MBARouteController",
initialize: function(){
console.log("Initializing the MBA app route controller");
},
showIndexPage: function(){
console.log("showing the index page");
}
});
baseRouter.registerRouteController(new RouteController(), [{"url":"Test.html","handler":"showIndexPage","events":[Router.Events.PAGE_BEFORE_SHOW]}]);

However the event doesn't seem to be firing and there is no error on my console too. How can i check if the event has been added to JQM router with out any issue.

Hi,
the right syntax should be (I've changed the example a little):

var eventAndMethod = {}, eventAndMethod2 = {};
eventAndMethod["/test.html"] = {};
eventAndMethod["/test.html"].events = "bs";
eventAndMethod["/test.html"].handler = "showIndexPage";
eventAndMethod2["/test2.html"] = {};
eventAndMethod2["/test2.html"].events = "bs";
eventAndMethod2["/test2.html"].handler = "showIndexPage2";

jqmRouterInstance.add([eventAndMethod, eventAndMethod2], handlerObj);

If you still have problems with your code, please write again and I'll dig some more into your code.

Cheers,
Andrea