Use "data-gadget-connection" rather than non compliant with any HTML

standards tags.

OfficeJS/src/renderjs/examples/interactions/index.html

@@ -17,19 +17,13 @@
          data-gadget-cache-id="B"></div>
 
     <div data-gadget=""
-         id="main-interactor">
-
-      <connect source="A.jsCall1"
-               destination="B.jsCall1"></connect>
-      <connect source="A.htmlEvent1"
-               destination="B.htmlEvent1"></connect>
-      <connect source="A.htmlEvent1"
-               destination="A.myOwnHtmlEvent1"></connect>
-      <connect source="A.htmlEvent2"
-               destination="B.htmlEvent2"></connect>
-      <connect source="B.jsCall2"
-               destination="A.jsCall2"></connect>
-
+         id="main-interactor"
+         data-gadget-connection="[
+          {&quot;source&quot;: &quot;A.jsCall1&quot;, &quot;destination&quot;: &quot;B.jsCall1&quot;},
+          {&quot;source&quot;: &quot;A.htmlEvent1&quot;, &quot;destination&quot;: &quot;B.htmlEvent1&quot;},
+          {&quot;source&quot;: &quot;A.htmlEvent1&quot;, &quot;destination&quot;: &quot;A.myOwnHtmlEvent1&quot;},
+          {&quot;source&quot;: &quot;A.htmlEvent2&quot;, &quot;destination&quot;: &quot;B.htmlEvent2&quot;},
+          {&quot;source&quot;: &quot;B.jsCall2&quot;, &quot;destination&quot;: &quot;A.jsCall2&quot;}]">
     </div>
 
     <script type="text/javascript" language="javascript">
@@ -38,7 +32,6 @@
         RenderJs.GadgetIndex.getRootGadget().getDom().bind("ready", function () {
           RenderJs.InteractionGadget.bind($("#main-interactor"));});
         });
-
       //]]>
     </script>
 

OfficeJS/src/renderjs/renderjs.js

@@ -462,7 +462,7 @@ var RenderJs = (function () {
                     /*
                      * Bind event between gadgets.
                      */
-                    var gadget_id;
+                    var gadget_id, gadget_connection_list;
                     var createMethodInteraction = function (
                         original_source_method_id, source_gadget_id,
                         source_method_id, destination_gadget_id,
@@ -486,18 +486,20 @@ var RenderJs = (function () {
                         return interaction;
                     };
                     gadget_id = gadget_dom.attr("id");
-                    gadget_dom.find("connect").each(function (key, value) {
+                    gadget_connection_list = gadget_dom.attr("data-gadget-connection");
+                    gadget_connection_list = $.parseJSON(gadget_connection_list);
+                    $.each(gadget_connection_list, function (key, value) {
                         var source, source_gadget_id, source_method_id,
                         source_gadget, destination, destination_gadget_id,
                         destination_method_id, destination_gadget,
                         original_source_method_id;
-                        source = $(value).attr("source").split(".");
+                        source = value['source'].split(".");
                         source_gadget_id = source[0];
                         source_method_id = source[1];
                         source_gadget = RenderJs.GadgetIndex.
                             getGadgetById(source_gadget_id);
 
-                        destination = $(value).attr("destination").split(".");
+                        destination = value['destination'].split(".");
                         destination_gadget_id = destination[0];
                         destination_method_id = destination[1];
                         destination_gadget = RenderJs.GadgetIndex.

OfficeJS/src/renderjs/test/interactions/index.html

@@ -9,13 +9,10 @@
      data-gadget-cache-id="B"></div>
 
 <div data-gadget=""
-     id="main-interactor">
-
-  <connect source="A.inc"
-           destination="B.inc"></connect>
-  <connect source="A.htmlEvent1"
-           destination="B.htmlEvent1"></connect>
-</div>
+     id="main-interactor"
+     data-gadget-connection="[
+       {&quot;source&quot;: &quot;A.inc&quot;, &quot;destination&quot;: &quot;B.inc&quot;},
+       {&quot;source&quot;: &quot;A.htmlEvent1&quot;, &quot;destination&quot;: &quot;B.htmlEvent1&quot;}]"></div>
 
 
 

OfficeJS/src/renderjs/test/renderjs_test.js

@@ -70,39 +70,39 @@ function setupRenderJSTest(){
     equal(33, RenderJs.GadgetIndex.getGadgetById("new-init").age);
   });
 
-  module("InteractionGadget");
-  test('InteractionGadget', function () {
+
+  module("GadgetReadyEvent");
+  test('GadgetReadyEvent', function () {
     cleanUp();
     RenderJs.addGadget("qunit-fixture", "interactions/index.html", "", "");
     stop();
 
     // we need to wait for all gadgets loading ...
     RenderJs.GadgetIndex.getRootGadget().getDom().bind("ready", function () {
-      RenderJs.InteractionGadget.bind($("#main-interactor"));
       start();
-      equal(0, counter);
-      // A.inc will call B.inc, both will increase counter by 1
-      RenderJs.GadgetIndex.getGadgetById("A").inc();
-      equal(2, counter);
-      // fire pure HTML event on A and test it calls respective B method
-      $('#A').trigger('htmlEvent1');
-      equal(3, counter);
+      equal(true, RenderJs.GadgetIndex.isGadgetListLoaded());
+      equal(true, RenderJs.isReady());
     });
    });
 
-  module("GadgetReadyEvent");
-  test('GadgetReadyEvent', function () {
+  module("InteractionGadget");
+  test('InteractionGadget', function () {
     cleanUp();
     RenderJs.addGadget("qunit-fixture", "interactions/index.html", "", "");
     stop();
 
     // we need to wait for all gadgets loading ...
     RenderJs.GadgetIndex.getRootGadget().getDom().bind("ready", function () {
+      RenderJs.InteractionGadget.bind($("#main-interactor"));
       start();
-      equal(true, RenderJs.GadgetIndex.isGadgetListLoaded());
-      equal(true, RenderJs.isReady());
+      equal(0, counter);
+      // A.inc will call B.inc, both will increase counter by 1
+      RenderJs.GadgetIndex.getGadgetById("A").inc();
+      equal(2, counter);
+      // fire pure HTML event on A and test it calls respective B method
+      $('#A').trigger('htmlEvent1');
+      equal(3, counter);
     });
-
    });
 };