fix issue in initial DOM node rendering

Author: eightyfour

README.md

@@ -519,4 +519,8 @@ canny.whisker.add(node, function (whiskerCb) {
   * repeat function pointer can be called with custom scope
   * repeat function pointer can be called without any scope (default scope is item)
   * remove on-click attribute from README
-  * mark object {for:..., in:...} as "legacy" and force to use string instead
+  * mark object {for:..., in:...} as "legacy" and force to use string instead
+
+**0.2.1**
+ * whisker
+   * fix issue in initial DOM node rendering

mod/whisker.js

@@ -75,7 +75,7 @@
             function compileTextNode(node, dataObj, itemName) {
                 var tokens = parse(node.nodeValue),
                     obj = dataObj,
-                    el, token, i, l, tmp, tokenObjectProperty, val;
+                    el, token, i, l, tmp, tokenObjectProperty, val, valUnknown;
                 if (!tokens || obj === undefined || typeof obj === 'string') {return; }
 
                 for (i = 0, l = tokens.length; i < l; i++) {
@@ -86,22 +86,29 @@
                         if (tmp.length > 0 && tmp[0] === itemName) {
                             tokenObjectProperty = tmp.slice(1).join('.');
                             if (typeof obj === 'object') {
-                                val = getGlobalCall(tokenObjectProperty, obj);
+                                valUnknown = getGlobalCall(tokenObjectProperty, obj);
                             } else {
-                                val = obj;
+                                valUnknown = obj;
                             }
                         } else {
                             // just a string?
-                            val = obj;
+                            valUnknown = obj;
+                        }
+
+                        if (typeof valUnknown === 'function') {
+                            val = valUnknown(node);
+                        } else {
+                            val = valUnknown;
                         }
+
                         if (typeof val === 'string' || typeof val === 'number') {
                             el = document.createTextNode(val);
                             node.parentNode.insertBefore(el, node);
                         } else if (typeof val === 'boolean') {
                             el = document.createTextNode(val.toString());
                             node.parentNode.insertBefore(el, node);
-                        } else if (typeof val === 'function') {
-                            el = document.createTextNode(val(node.parentNode));
+                        } else if (val instanceof HTMLElement) {
+                            el = val;
                             node.parentNode.insertBefore(el, node);
                         } else if (tmp[0] === itemName) {
                             // property is not exists but it is the same scope

package.json

@@ -3,7 +3,7 @@
   "auth": "eightyfour",
   "email": "[email protected]",
   "description": "Simple dom module manager with basic view support.",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "browserify": "canny.js",
   "engines": {
     "node": ">= v0.10.0"

spec/test.html

@@ -99,56 +99,23 @@
         },
         concatStringAttributes: function (fc) {
           concatStringAttributesFc = fc;
+          var div = document.createElement('span');
+          div.innerHTML = 'Initial node';
+          div.className = 'bold';
           fc('scope', {
 //            value: "before",
-            attribute : function (node) {
-              console.log('test:attribute', node);
-              return 'HelloAttribute'
-            },
-            bind: function (node) {
-//                            node.innerHTML = fcCallIndex;
-//                            if (node.getAttribute('data') === '1')
-//                            return false;
-            },
-            innerBind: function (node) {
-//                            node.innerHTML = fcCallIndex;
-//                            if (node.getAttribute('data') === '1')
-//                            return false;
-            }
+            attribute : div,
           });
         },
         add: function (node, attr) {
           if (attr === 'btn-1') {
             node.addEventListener('click', function () {
               fcCallIndex++;
+                var div = document.createElement('span');
+                div.innerHTML = 'mix node' + fcCallIndex;
+                div.className = 'bold';
               concatStringAttributesFc({
-                attribute : function (node) {
-                  console.log('test:attribute1', node);
-                   return 'newClassName' + fcCallIndex;
-                }
-//                value: "HALLO ",
-//                mix: function (node) {
-//                  console.log('test:mix', node.parentNode);
-//                  return fcCallIndex % 2 ? 'foo buhhh yahooo' : (function () {
-//                    var div = document.createElement('strong');
-//                    div.innerHTML = 'mix node' + fcCallIndex;
-//                    div.className = 'bold';
-//                    return div;
-//                  }())
-//                },
-//                deep : {
-//                  inside : 'hu hu hu',
-//                  insideFc : function (node) {
-//                    console.log('test:insideFc', node);
-//                    return 'function blob'
-//                  }
-//                },
-//                tagSample : (function () {
-//                  var div = document.createElement('strong');
-//                  div.innerHTML = '99999' + fcCallIndex;
-//                  div.className = 'bold';
-//                  return div;
-//                }())
+                attribute : div
               })
             })
           } else if (attr === 'btn-2') {
@@ -175,7 +142,7 @@
 
 <div id="concatStringAttributes" canny-mod="whisker" canny-var="canny.whiskerSample.concatStringAttributes">
   <!--<div class="test {{scope.value}}"></div>-->
-  <div class="foo {{scope.attribute}}"></div>
+  <div class="foo">{{scope.attribute}}</div>
   <!--<div>deep {{scope.deep.inside}}</div>-->
   <!--<div>deepFC {{scope.deep.insideFc}}</div>-->
   <!--<div>ADN HERE THE MIX "{{scope.mix}}" :)</div>-->