Fixing interaction between stickit and template renderer for option t…

…ags.
vecnatechnologies · Aug 16, 2016 · ef3a137 · ef3a137
1 parent e81bf18
commit ef3a137
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 26 deletions.
diff --git a/docs/js/classes/Torso.Utils.handlebarsUtils.html b/docs/js/classes/Torso.Utils.handlebarsUtils.html
@@ -442,7 +442,7 @@ <h3 class="name"><code>Handlebars.helpers.formAttr</code></h3>
 
     <div class="description">
         <p>Usage: {{formAttr 'fieldName[x].sub' 'id, for' value='demo' x=123}}
-Generates: id=&quot;first-name-123_sub-demo&quot; for=&quot;first-name-123_sub&quot;</p>
+Generates: id=&quot;first-name-123_sub-demo&quot; for=&quot;first-name-123_sub&quot; value=&quot;demo&quot;</p>
 
     </div>
 
@@ -538,7 +538,7 @@ <h3 class="name"><code>Handlebars.helpers.labelFor</code></h3>
     </div>
 
     <div class="description">
-        <p>Usage: {{label 'fieldName' value=&quot;suffix&quot;}}
+        <p>Usage: {{labelFor 'fieldName' value=&quot;suffix&quot;}}
 Generates: for=&quot;field-name-suffix&quot;</p>
 
     </div>

diff --git a/docs/js/classes/Torso.Utils.templateRenderer.html b/docs/js/classes/Torso.Utils.templateRenderer.html
@@ -103,7 +103,7 @@ <h1>Torso.Utils.templateRenderer Class</h1>
 
 
         <div class="foundat">
-            Defined in: <a href="../files/modules_templateRenderer.js.html#l132"><code>modules&#x2F;templateRenderer.js:132</code></a>
+            Defined in: <a href="../files/modules_templateRenderer.js.html#l154"><code>modules&#x2F;templateRenderer.js:154</code></a>
         </div>
 
             Module: <a href="../modules/Torso.html">Torso</a>
@@ -195,7 +195,7 @@ <h3 class="name"><code>copyTopElement</code></h3>
     <div class="meta">
                 <p>
                 Defined in
-        <a href="../files/modules_templateRenderer.js.html#l197"><code>modules&#x2F;templateRenderer.js:197</code></a>
+        <a href="../files/modules_templateRenderer.js.html#l219"><code>modules&#x2F;templateRenderer.js:219</code></a>
         </p>
 
 
@@ -261,7 +261,7 @@ <h3 class="name"><code>getCaretPosition</code></h3>
     <div class="meta">
                 <p>
                 Defined in
-        <a href="../files/modules_templateRenderer.js.html#l222"><code>modules&#x2F;templateRenderer.js:222</code></a>
+        <a href="../files/modules_templateRenderer.js.html#l244"><code>modules&#x2F;templateRenderer.js:244</code></a>
         </p>
 
 
@@ -417,7 +417,7 @@ <h3 class="name"><code>hotswapKeepCaret</code></h3>
     <div class="meta">
                 <p>
                 Defined in
-        <a href="../files/modules_templateRenderer.js.html#l169"><code>modules&#x2F;templateRenderer.js:169</code></a>
+        <a href="../files/modules_templateRenderer.js.html#l191"><code>modules&#x2F;templateRenderer.js:191</code></a>
         </p>
 
 
@@ -502,7 +502,7 @@ <h3 class="name"><code>render</code></h3>
     <div class="meta">
                 <p>
                 Defined in
-        <a href="../files/modules_templateRenderer.js.html#l143"><code>modules&#x2F;templateRenderer.js:143</code></a>
+        <a href="../files/modules_templateRenderer.js.html#l165"><code>modules&#x2F;templateRenderer.js:165</code></a>
         </p>
 
 
@@ -631,7 +631,7 @@ <h3 class="name"><code>setCaretPosition</code></h3>
     <div class="meta">
                 <p>
                 Defined in
-        <a href="../files/modules_templateRenderer.js.html#l252"><code>modules&#x2F;templateRenderer.js:252</code></a>
+        <a href="../files/modules_templateRenderer.js.html#l274"><code>modules&#x2F;templateRenderer.js:274</code></a>
         </p>
 
 
@@ -708,7 +708,7 @@ <h3 class="name"><code>supportsSelection</code></h3>
     <div class="meta">
                 <p>
                 Defined in
-        <a href="../files/modules_templateRenderer.js.html#l211"><code>modules&#x2F;templateRenderer.js:211</code></a>
+        <a href="../files/modules_templateRenderer.js.html#l233"><code>modules&#x2F;templateRenderer.js:233</code></a>
         </p>
 
 

diff --git a/docs/js/data.json b/docs/js/data.json
@@ -552,7 +552,7 @@
             "module": "Torso",
             "namespace": "Torso.Utils",
             "file": "modules/templateRenderer.js",
-            "line": 132,
+            "line": 154,
             "description": "Static Template Engine.\nAll template renders should be piped through this method."
         },
         "Torso": {
@@ -4646,7 +4646,7 @@
         {
             "file": "modules/handlebarsUtils.js",
             "line": 28,
-            "description": "Usage: {{label 'fieldName' value=\"suffix\"}}\nGenerates: for=\"field-name-suffix\"",
+            "description": "Usage: {{labelFor 'fieldName' value=\"suffix\"}}\nGenerates: for=\"field-name-suffix\"",
             "itemtype": "method",
             "name": "Handlebars.helpers.labelFor",
             "params": [
@@ -4738,7 +4738,7 @@
         {
             "file": "modules/handlebarsUtils.js",
             "line": 66,
-            "description": "Usage: {{formAttr 'fieldName[x].sub' 'id, for' value='demo' x=123}}\nGenerates: id=\"first-name-123_sub-demo\" for=\"first-name-123_sub\"",
+            "description": "Usage: {{formAttr 'fieldName[x].sub' 'id, for' value='demo' x=123}}\nGenerates: id=\"first-name-123_sub-demo\" for=\"first-name-123_sub\" value=\"demo\"",
             "itemtype": "method",
             "name": "Handlebars.helpers.formAttr",
             "params": [
@@ -4844,7 +4844,22 @@
         },
         {
             "file": "modules/templateRenderer.js",
-            "line": 143,
+            "line": 40,
+            "description": "Stickit will rely on the 'stickit-bind-val' jQuery data attribute to determine the value to use for a given option.\nIf the value DOM attribute is not the same as the stickit-bind-val, then this will clear the jquery data attribute\nso that stickit will use the value DOM attribute of the option.  This happens when templateRenderer merges\nthe attributes of the newNode into a current node of the same type when the current node has the stickit-bind-val\njQuery data attribute set.\n\nIf the node value is not set, then the stickit-bind-val might be how the view is communicating the value for stickit to use\n(possibly in the case of non-string values).  In this case trust the stickit-bind-val.",
+            "params": [
+                {
+                    "name": "node",
+                    "description": "the DoM element to test and fix the stickit data on.",
+                    "type": "Node"
+                }
+            ],
+            "class": "Torso.Utils.templateRenderer",
+            "module": "Torso",
+            "namespace": "Torso.Utils"
+        },
+        {
+            "file": "modules/templateRenderer.js",
+            "line": 165,
             "description": "Performs efficient re-rendering of a template.",
             "itemtype": "method",
             "name": "render",
@@ -4898,7 +4913,7 @@
         },
         {
             "file": "modules/templateRenderer.js",
-            "line": 169,
+            "line": 191,
             "description": "Call this.hotswap but also keeps the caret position the same",
             "params": [
                 {
@@ -4925,7 +4940,7 @@
         },
         {
             "file": "modules/templateRenderer.js",
-            "line": 197,
+            "line": 219,
             "description": "Produces a copy of the element tag with attributes but with no contents",
             "params": [
                 {
@@ -4946,7 +4961,7 @@
         },
         {
             "file": "modules/templateRenderer.js",
-            "line": 211,
+            "line": 233,
             "description": "Determines if the element supports selection. As per spec, https://html.spec.whatwg.org/multipage/forms.html#do-not-apply\nselection is only allowed for text, search, tel, url, password. Other input types will throw an exception in chrome",
             "params": [
                 {
@@ -4967,7 +4982,7 @@
         },
         {
             "file": "modules/templateRenderer.js",
-            "line": 222,
+            "line": 244,
             "description": "Method that returns the current caret (cursor) position of a given element.\nSource: http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field",
             "itemtype": "method",
             "name": "getCaretPosition",
@@ -4988,7 +5003,7 @@
         },
         {
             "file": "modules/templateRenderer.js",
-            "line": 252,
+            "line": 274,
             "description": "Method that returns sets the current caret (cursor) position of a given element and puts it in focus.\nSource: http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox",
             "itemtype": "method",
             "name": "setCaretPosition",
@@ -5051,6 +5066,10 @@
         {
             "message": "Missing item type\nViewStateCell is a NestedCell that holds view state data and can trigger\nchange events. These changes events will propogate up and trigger on the view\nas well.",
             "line": " modules/View.js:13"
+        },
+        {
+            "message": "Missing item type\nStickit will rely on the 'stickit-bind-val' jQuery data attribute to determine the value to use for a given option.\nIf the value DOM attribute is not the same as the stickit-bind-val, then this will clear the jquery data attribute\nso that stickit will use the value DOM attribute of the option.  This happens when templateRenderer merges\nthe attributes of the newNode into a current node of the same type when the current node has the stickit-bind-val\njQuery data attribute set.\n\nIf the node value is not set, then the stickit-bind-val might be how the view is communicating the value for stickit to use\n(possibly in the case of non-string values).  In this case trust the stickit-bind-val.",
+            "line": " modules/templateRenderer.js:40"
         }
     ]
 }
diff --git a/docs/js/files/modules_handlebarsUtils.js.html b/docs/js/files/modules_handlebarsUtils.js.html
@@ -130,7 +130,7 @@ <h1 class="file-heading">File: modules/handlebarsUtils.js</h1>
         MODEL_KEY = &#x27;model&#x27;;
 
     /**
-     * Usage: {{label &#x27;fieldName&#x27; value=&quot;suffix&quot;}}
+     * Usage: {{labelFor &#x27;fieldName&#x27; value=&quot;suffix&quot;}}
      * Generates: for=&quot;field-name-suffix&quot;
      * @method Handlebars.helpers.labelFor
      * @param field {String} The field name to convert to a compliant &quot;for&quot; attribute
@@ -169,7 +169,7 @@ <h1 class="file-heading">File: modules/handlebarsUtils.js</h1>
 
     /**
      * Usage: {{formAttr &#x27;fieldName[x].sub&#x27; &#x27;id, for&#x27; value=&#x27;demo&#x27; x=123}}
-     * Generates: id=&quot;first-name-123_sub-demo&quot; for=&quot;first-name-123_sub&quot;
+     * Generates: id=&quot;first-name-123_sub-demo&quot; for=&quot;first-name-123_sub&quot; value=&quot;demo&quot;
      * @method Handlebars.helpers.formAttr
      * @param field {String} The field name to convert to a compliant data-feedback attribute
      * @param options {&lt;Handlebars context&gt;} Always passed in as final argument

diff --git a/docs/js/files/modules_templateRenderer.js.html b/docs/js/files/modules_templateRenderer.js.html
@@ -141,6 +141,26 @@ <h1 class="file-heading">File: modules/templateRenderer.js</h1>
     }
   }
 
+  /**
+   * Stickit will rely on the &#x27;stickit-bind-val&#x27; jQuery data attribute to determine the value to use for a given option.
+   * If the value DOM attribute is not the same as the stickit-bind-val, then this will clear the jquery data attribute
+   * so that stickit will use the value DOM attribute of the option.  This happens when templateRenderer merges
+   * the attributes of the newNode into a current node of the same type when the current node has the stickit-bind-val
+   * jQuery data attribute set.
+   *
+   * If the node value is not set, then the stickit-bind-val might be how the view is communicating the value for stickit to use
+   * (possibly in the case of non-string values).  In this case trust the stickit-bind-val.
+   *
+   * @param node {Node} the DoM element to test and fix the stickit data on.
+   */
+  function cleanupStickitData(node) {
+    var $node = $(node);
+    var stickitValue = $node.data(&#x27;stickit-bind-val&#x27;);
+    if (node.tagName === &#x27;OPTION&#x27; &amp;&amp; node.value !== undefined &amp;&amp; stickitValue !== node.value) {
+      $node.removeData(&#x27;stickit-bind-val&#x27;);
+    }
+  }
+
   /*
    * Swap method for Element Nodes
    * @param currentNode {Element} The pre-existing DOM Element to update
@@ -185,6 +205,8 @@ <h1 class="file-heading">File: modules/templateRenderer.js</h1>
       currentNode.setAttribute(attrib.name, attrib.value);
     });
 
+    cleanupStickitData(currentNode);
+
     // Quick check to see if we need to bother comparing sub-levels
     if ($currentNode.html() === $newNode.html()) {
       return;

diff --git a/modules/handlebarsUtils.js b/modules/handlebarsUtils.js
@@ -26,7 +26,7 @@
         MODEL_KEY = 'model';
 
     /**
-     * Usage: {{label 'fieldName' value="suffix"}}
+     * Usage: {{labelFor 'fieldName' value="suffix"}}
      * Generates: for="field-name-suffix"
      * @method Handlebars.helpers.labelFor
      * @param field {String} The field name to convert to a compliant "for" attribute
@@ -65,7 +65,7 @@
 
     /**
      * Usage: {{formAttr 'fieldName[x].sub' 'id, for' value='demo' x=123}}
-     * Generates: id="first-name-123_sub-demo" for="first-name-123_sub"
+     * Generates: id="first-name-123_sub-demo" for="first-name-123_sub" value="demo"
      * @method Handlebars.helpers.formAttr
      * @param field {String} The field name to convert to a compliant data-feedback attribute
      * @param options {<Handlebars context>} Always passed in as final argument

diff --git a/modules/templateRenderer.js b/modules/templateRenderer.js
@@ -37,6 +37,26 @@
     }
   }
 
+  /**
+   * Stickit will rely on the 'stickit-bind-val' jQuery data attribute to determine the value to use for a given option.
+   * If the value DOM attribute is not the same as the stickit-bind-val, then this will clear the jquery data attribute
+   * so that stickit will use the value DOM attribute of the option.  This happens when templateRenderer merges
+   * the attributes of the newNode into a current node of the same type when the current node has the stickit-bind-val
+   * jQuery data attribute set.
+   *
+   * If the node value is not set, then the stickit-bind-val might be how the view is communicating the value for stickit to use
+   * (possibly in the case of non-string values).  In this case trust the stickit-bind-val.
+   *
+   * @param node {Node} the DoM element to test and fix the stickit data on.
+   */
+  function cleanupStickitData(node) {
+    var $node = $(node);
+    var stickitValue = $node.data('stickit-bind-val');
+    if (node.tagName === 'OPTION' && node.value !== undefined && stickitValue !== node.value) {
+      $node.removeData('stickit-bind-val');
+    }
+  }
+
   /*
    * Swap method for Element Nodes
    * @param currentNode {Element} The pre-existing DOM Element to update
@@ -81,6 +101,8 @@
       currentNode.setAttribute(attrib.name, attrib.value);
     });
 
+    cleanupStickitData(currentNode);
+
     // Quick check to see if we need to bother comparing sub-levels
     if ($currentNode.html() === $newNode.html()) {
       return;

diff --git a/torso-bundle.js b/torso-bundle.js
@@ -83,7 +83,7 @@
         MODEL_KEY = 'model';
 
     /**
-     * Usage: {{label 'fieldName' value="suffix"}}
+     * Usage: {{labelFor 'fieldName' value="suffix"}}
      * Generates: for="field-name-suffix"
      * @method Handlebars.helpers.labelFor
      * @param field {String} The field name to convert to a compliant "for" attribute
@@ -122,7 +122,7 @@
 
     /**
      * Usage: {{formAttr 'fieldName[x].sub' 'id, for' value='demo' x=123}}
-     * Generates: id="first-name-123_sub-demo" for="first-name-123_sub"
+     * Generates: id="first-name-123_sub-demo" for="first-name-123_sub" value="demo"
      * @method Handlebars.helpers.formAttr
      * @param field {String} The field name to convert to a compliant data-feedback attribute
      * @param options {<Handlebars context>} Always passed in as final argument
@@ -298,6 +298,26 @@
     }
   }
 
+  /**
+   * Stickit will rely on the 'stickit-bind-val' jQuery data attribute to determine the value to use for a given option.
+   * If the value DOM attribute is not the same as the stickit-bind-val, then this will clear the jquery data attribute
+   * so that stickit will use the value DOM attribute of the option.  This happens when templateRenderer merges
+   * the attributes of the newNode into a current node of the same type when the current node has the stickit-bind-val
+   * jQuery data attribute set.
+   *
+   * If the node value is not set, then the stickit-bind-val might be how the view is communicating the value for stickit to use
+   * (possibly in the case of non-string values).  In this case trust the stickit-bind-val.
+   *
+   * @param node {Node} the DoM element to test and fix the stickit data on.
+   */
+  function cleanupStickitData(node) {
+    var $node = $(node);
+    var stickitValue = $node.data('stickit-bind-val');
+    if (node.tagName === 'OPTION' && node.value !== undefined && stickitValue !== node.value) {
+      $node.removeData('stickit-bind-val');
+    }
+  }
+
   /*
    * Swap method for Element Nodes
    * @param currentNode {Element} The pre-existing DOM Element to update
@@ -342,6 +362,8 @@
       currentNode.setAttribute(attrib.name, attrib.value);
     });
 
+    cleanupStickitData(currentNode);
+
     // Quick check to see if we need to bother comparing sub-levels
     if ($currentNode.html() === $newNode.html()) {
       return;

diff --git a/torso-bundle.min.js b/torso-bundle.min.js