Rather than call a hard coded function allow RouteGadget to call any

executable function from RouteGadget.
Extend tests to follow change above. Add InteractionGadget to show how
RouteGadget works with InteractionGadget in example.

examples/route/index.html

@@ -15,8 +15,8 @@
     <div data-gadget=""
          id="main-router"
          data-gadget-route="[
-          {&quot;source&quot;: &quot;/gadget-one/&quot;, &quot;destination&quot;: &quot;gadget-one&quot;},
-          {&quot;source&quot;: &quot;/gadget-two/&quot;, &quot;destination&quot;: &quot;gadget-two&quot;}]">
+          {&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>
 
     <div id="gadget-color-picker"
@@ -31,6 +31,13 @@
     <div id="gadget-footer"
          data-gadget="gadget-footer.html"></div>
 
+    <div data-gadget=""
+         id="main-interactor"
+         data-gadget-connection="[
+          {&quot;source&quot;: &quot;main-router.gadget_one&quot;, &quot;destination&quot;: &quot;gadget-one.render&quot;},
+          {&quot;source&quot;: &quot;main-router.gadget_two&quot;, &quot;destination&quot;: &quot;gadget-two.render&quot;}]">
+    </div>
+
     <noscript>
       Please enable Javascript
     </noscript>

examples/route/require-renderjs_route.js

@@ -14,6 +14,22 @@ require.config({
 
 require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(domReady) {
           RenderJs.bindReady(function (){
+
+            // XXX: try to encapsulate this in router gadget
+            gadget = RenderJs.GadgetIndex.getGadgetById("main-router");
+            gadget.gadget_one = function (){
+              console.log("gadget-one");
+              // we use interactionGadget which will call proper gadgets' function
+            };
+            gadget = RenderJs.GadgetIndex.getGadgetById("main-router");
+            gadget.gadget_two = function (){
+              console.log("gadget-two");
+              // we use interactionGadget which will call proper gadgets' function
+            };
+
+            // XXX: fid why interaction gadget is not initialized proeprly yet
+            RenderJs.InteractionGadget.bind($("#main-interactor"))
+
             var body = $("body");
             RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
             $.url.onhashchange(function () {

renderjs.js

@@ -775,7 +775,10 @@ var RenderJs = (function () {
                     body
                       .route("add", gadget_route.source, 1)
                       .done(function () {
-                        RenderJs.GadgetIndex.getGadgetById(gadget_route.destination).render();
+                        var gadget_id = gadget_route.destination.split('.')[0],
+                            method_id = gadget_route.destination.split('.')[1];
+                        gadget = RenderJs.GadgetIndex.getGadgetById(gadget_id);
+                        gadget[method_id]();
                       });
                   });
                 }

test/route/gadget-one.html

@@ -5,7 +5,7 @@
       //<![CDATA[
         $(document).ready(function() {
             gadget = RenderJs.GadgetIndex.getGadgetById("gadget-one");
-            gadget.render = function (){
+            gadget.gadget_one = function (){
               route_changed=1; // so we can test this method was actually called from qunit
             };
         });

test/route/index.html

@@ -11,7 +11,7 @@
     <div data-gadget=""
          id="main-router"
          data-gadget-route="[
-              {&quot;source&quot;: &quot;/gadget-one/&quot;, &quot;destination&quot;: &quot;gadget-one&quot;}]">
+              {&quot;source&quot;: &quot;/gadget-one/&quot;, &quot;destination&quot;: &quot;gadget-one.gadget_one&quot;}]">
     </div>
 
     <div id="gadget-one"