Pass all arguments from url to handler function.

Allow getSelfGadget to be used in handler function.
Allow to define multiple levels of urls.

examples/route/gadget-color-picker.html

@@ -18,7 +18,7 @@
       <li><a href="#/color/150/150/150/" class="list-item" style="background-color:rgb(150,150,150);">&nbsp;</a></li>
       <li style="text-align: center;"><a href="#/color/X/X/X" style="text-decoration: none; display: block; width: 2em;">XXX</a></li>
     </ul>
-    <div class="select-color" style="display: block;">Unknown color (/color/)</div>
+    <div class="select-color" style="display: block;"></div>
 
     <div class="container"></div>
 
@@ -34,19 +34,18 @@
               $.url.redirect('/color/');
             };
 
+            gadget.selectColorMessage = function () {
+              $('.select-color').text("Please select a color");
+            };
+
+            gadget.updateColor = function (red, green, blue) {
+              $('.select-color').html(
+                "<div style='background-color:rgb(" + red + "," + green + "," + blue + ");'>&nbsp;<\/div>" +
+                "<p>Color (" + red + "," + green + "," + blue + ") selected at " + new Date() + "<\/p>");
+            };
+
             gadget.initRoutes = function () {
-              // Create sub routed in the container
-              // XXX: it uses low level API
-              RenderJs.RouteGadget.add("/color/",
-                                       function () {
-                                         $('.select-color').text("Please select a color");},
-                                       2);
-              RenderJs.RouteGadget.add("/color/<int:red>/<int:green>/<int:blue>/",
-                                       function (red, green, blue) {
-                                        $('.select-color').html(
-                                           "<div style='background-color:rgb(" + red + "," + green + "," + blue + ");'>&nbsp;<\/div>" +
-                                           "<p>Color (" + red + "," + green + "," + blue + ") selected at " + new Date() + "<\/p>");},
-                                        2);
+              // XXX: improve this part so we can declare in RouteGadget
               RenderJs.RouteGadget.go($.url.getPath(),
                                       function () {
                                         $('.select-color').html("Unknown color (" + $.url.getPath() + ")");},

examples/route/gadget-three.html

@@ -7,11 +7,10 @@
       //<![CDATA[
         $(document).ready(function() {
             gadget = RenderJs.getSelfGadget();
-            //console.log($(gadget.getDom()).find(".gadget-id-viewer"));
             $(gadget.getDom()).find(".gadget-id-viewer").html("This is " + gadget.getId())
 
-            gadget.render = function (gadget_id){
-              gadget = RenderJs.GadgetIndex.getGadgetById(gadget_id);
+            gadget.render = function (){
+              gadget = RenderJs.getSelfGadget();
               $(gadget.getDom().find(".gadget-id-viewer")).toggle();
             };
         });

examples/route/index.html

@@ -20,6 +20,12 @@
          data-gadget-route="[
           {"source": "", "destination": "gadget-color-picker.redirect"},
           {&quot;source&quot;: &quot;/color<path:params>&quot;, &quot;destination&quot;: &quot;gadget-color-picker.initRoutes&quot;},
+          {&quot;source&quot;: &quot;/color/&quot;,
+           &quot;destination&quot;: &quot;gadget-color-picker.selectColorMessage&quot;,
+           &quot;priority&quot;:2},
+          {&quot;source&quot;: &quot;/color/<int:red>/<int:green>/<int:blue>/&quot;,
+           &quot;destination&quot;: &quot;gadget-color-picker.updateColor&quot;,
+           &quot;priority&quot;:2},
           {&quot;source&quot;: &quot;/gadget-one/&quot;, &quot;destination&quot;: &quot;main-router.gadget_one&quot;},
           {&quot;source&quot;: &quot;/gadget-two/&quot;, &quot;destination&quot;: &quot;main-router.gadget_two&quot;}]">
     </div>

examples/route/require-renderjs_route.js

@@ -31,18 +31,18 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d
 
             $.url.onhashchange(function () {
               RenderJs.RouteGadget.go($.url.getPath(),
-                                      function () {
-                                        // Method to display error to the user
-                                        gadget = RenderJs.GadgetIndex.getGadgetById("portal-status-message");
-                                        gadget.showMessage(
-                                          "<p>Oups, seems the route '<b>" + $.url.getPath() + "<\/b>' doesn't exist!<\/p>" +
-                                            "<a href='" + $.url.generateUrl("") + "'>Go back to home<\/a>");
-                                        // All routes have been deleted by fail.
-                                        // So recreate the default routes using RouteGadget
-                                        $("div[data-gadget-route]").each(function (index, element) {
-                                          RenderJs.RouteGadget.route($(element));
-                                        });
-                                      });
+                function () {
+                  // Method to display error to the user
+                  gadget = RenderJs.GadgetIndex.getGadgetById("portal-status-message");
+                  gadget.showMessage(
+                    "<p>Oups, seems the route '<b>" + $.url.getPath() + "<\/b>' doesn't exist!<\/p>" +
+                    "<a href='" + $.url.generateUrl("") + "'>Go back to home<\/a>");
+                  // All routes have been deleted by fail.
+                  // So recreate the default routes using RouteGadget
+                  $("div[data-gadget-route]").each(function (index, element) {
+                    RenderJs.RouteGadget.route($(element));
+                  });
+                });
             });
           });
 });

renderjs.js

@@ -786,7 +786,7 @@ var RenderJs = (function () {
                      * Create routes between gadgets.
                      */
                   var body = $("body"),
-                      handler_func,
+                      handler_func, priority,
                       gadget_route_list = gadget_dom.attr("data-gadget-route");
                   gadget_route_list = $.parseJSON(gadget_route_list);
                   $.each(gadget_route_list, function (key, gadget_route) {
@@ -794,11 +794,19 @@ var RenderJs = (function () {
                         var gadget_id = gadget_route.destination.split('.')[0],
                             method_id = gadget_route.destination.split('.')[1],
                             gadget = RenderJs.GadgetIndex.getGadgetById(gadget_id);
-                        // XXX: pass passed to us arguments + gadget_id
-                        gadget[method_id](gadget_id=gadget_id);
+                        // set gadget value so getSelfGadget can work
+                        current_gadget = gadget;
+                        gadget[method_id].apply(null, arguments);
+                        // reset as no longer needed
+                        current_gadget = undefined;
                     };
                     // add route itself
-                    RenderJs.RouteGadget.add(gadget_route.source, handler_func, 1);
+                    priority = gadget_route.priority;
+                    if (priority === undefined) {
+                      // default is 1 -i.e.first level
+                      priority = 1;
+                    }
+                    RenderJs.RouteGadget.add(gadget_route.source, handler_func, priority);
                   });
                 },