Question

I have been happily using JQM for awhile now. However I recently started a new project which required dynamically created pages to be pushed into the history with their content determined by url parameters. I am going to show you how I originally approached controllers with JQM and how I have tried to approach the router plugin.

This is how I used to write all my controllers for JQM:

myApp.foo.controller = (function($){

    "use strict";

    var $page;

    var init = function()
    {
        $page = $("#foo-page");
        applyBindings();
    };

    var applyBindings = function()
    {       
        // Page transition events
        $page.bind("pagebeforeshow", onPageBeforeShow);
    };

    var onPageBeforeShow = function()
    {

    };

     return  {
        init: init
     }

})(jQuery);

$("#foo-page").live("pageinit", function(e)
{
    myApp.foo.controller.init();
});

So I am now using the JQM recommended routing plugin. I am not using spine or backbone. And I dont want to get this wrong as its fundamental to the app. So I load all my controllers and then load my router.js file.

This gives me the behaviour i’m expecting:

    var router = new $.mobile.Router([
        {"#foo-page": {events:"i", handler: myApp.foo.controller.init}},
        {"#foo-page": {events:"s", handler: myApp.foo.controller.onPageShow}},          

        {"#dynamic-foo(?:[?/](.*))?": {events:"i", handler: myApp.dynamicFoo.controller.init}},
        {"#dynamic-foo(?:[?/](.*))?": {events:"bs", handler: myApp.dynamicFoo.controller.onPageBeforeShow}},
    ]);

But Is this the right way to use the router plugin? Because I read the documentation and the author seems to use the router object as the actual controller.

To be clear, this works for me I’m just not sure if this is really the idea of routing or perhaps this is the wrong approach?

Answer 1

don’t worry, there’s no “right way” to use the router, and your approach is correct.

Another way to do the same thing would be:

var router = new $.mobile.Router([
    {"#foo-page": {events:"i", handler: "init"}},
    etc
],myApp.foo.controller);

it’s just a matter of taste.