title: How to properly implement the Jquery Mobile Router plugin
body: <p>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.</p>
  
  <p>This is how I used to write all my controllers for JQM:</p>
  
  <pre><code>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();
  });
  </code></pre>
  
  <p>So I am now using the <a href="https://github.com/azicchetti/jquerymobile-router" rel="nofollow">JQM recommended routing plugin</a>.  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.</p>
  
  <p>This gives me the behaviour i'm expecting:</p>
  
  <pre><code>    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}},
      ]);
  </code></pre>
  
  <p>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. </p>
  
  <p>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?</p>