basic templating

static/index.html

@@ -18,13 +18,27 @@
         <p>
             <select id="select">
                 <option value="">--</option>
-                <option value="M">Male</option>
-                <option value="F">Female</option>
-                <option value="X">Xenomorph</option>
+                <!--<option value="M" style="background-color: gray;">Male</option>-->
+                <!--<option value="F">Female</option>-->
+                <!--<option value="X">Xenomorph</option> -->
             </select>
         </p>
-        <input type='checkbox' id='check1'>
-        <pre id='state' style='background-color: lightgray;'></pre>
+        <input type='checkbox' id='check1'><br/>
+        <div id="checkContainer">
+            <input type='checkbox'>
+        </div>
+        <table>
+            <tr>
+                <td></td>
+            </tr>
+            <tr style='background-color: gray;'>
+                <td></td>
+            </tr>
+        </table>
+        <strong>Use $s variable for accessing data in DOM</strong>
+        <pre id='state' style='background-color: lightgray;'>
+            wait for sec...
+        </pre>
         <script src="index.js"></script>
     </body>
 </html>

static/index.js

@@ -1,28 +1,61 @@
 function nbInit($s){
-    function nBind(callback){
+    function nBind(callback, prop){
         for (var selector in $s){
+            selector = prop || selector;
+
             var items = document.querySelectorAll(selector);
-            items     = items.length ? items : document.querySelectorAll("#" + selector); 
+            items     = items.length ? items : [document.getElementById(selector)]; 
+            items     = items[0]     ? items :  document.getElementsByName(selector); 
             for (var i=0,item=items[i];i<items.length;i++,item=items[i]){
                 callback(item, $s, selector)
             }
+
+            if (prop) return; 
         }
     }
 
-    function syncToDOM(){
-        nBind(function(item, $s, selector){
-            if (item.type === 'radio'){
-                if (item.value === $s[selector]){
+    function syncToDOM(prop){
+        nBind(function (item, $s, selector, value, key){
+            value = typeof value === 'undefined' ? $s[selector] : value;
+            var keyExists = typeof key !== 'undefined';
+            if (keyExists){
+                item.value = key;
+            }
+            if (item.type === 'radio' && !keyExists){
+                if (item.value === value){
                     item.checked = true;
                 }
                 return;
             }
-            if (item.type === 'checkbox'){
-                item.checked = !!$s[selector];
+            if (item.type === 'checkbox' && !keyExists){
+                item.checked = !!value;
                 return;
             }
-            item["value" in item ? "value" : "innerText"] = $s[selector];
-        });
+            if (item.children.length && typeof value === "object"){
+                var originalChildren = Array.prototype.slice.call(item.children);
+                var i = 0;
+                var isArray = Array.isArray(value);
+                item.innerHTML = "";
+                for (var key in value){
+                    var newNode = originalChildren[i].cloneNode(true);
+                    item.appendChild(newNode);
+                    if (isArray){
+                        arguments.callee(newNode, $s, selector, value[key]);
+                    }
+                    else {
+                        arguments.callee(newNode, $s, selector, value[key], key);
+                    }
+                    i = (i +1) % originalChildren.length;
+                }
+                return;
+            }
+            if (!keyExists){
+                item["value" in item ? "value" : "innerText"] = value;
+            }
+            else {
+                item.innerText = value;
+            }
+        },prop);
     }
 
     function syncFromDOM(){
@@ -44,16 +77,16 @@ function nbInit($s){
 
     var scopeProxy = new Proxy($s,{
         get(target, prop){
-            if (!(prop in target) && (document.querySelectorAll(prop).length || document.querySelectorAll("#" +prop).length)){
+            if (!(prop in target) && (document.querySelectorAll(prop).length || document.getElementById(prop) || document.getElementsByName(prop).length)){
                 target[prop] = null;
             }
             syncFromDOM();
             return target[prop];
         },
         set(target, prop, value){
-            syncFromDOM();
+            //syncFromDOM();
             target[prop] = value
-            syncToDOM();
+            syncToDOM(prop);
             return true;
         },
     })
@@ -61,14 +94,24 @@ function nbInit($s){
     return scopeProxy;
 }
 
-var $s = nbInit({
+var $s;
+setTimeout(function(){
+    $s = nbInit({
     text1: "txt",
-    p1: "para"
-});
+    p1: "para",
+    select: {"": "--",
+             M:  "Male",
+             F:  "Female",
+             X:  "Xenomorph"},
+    tbody: [[1,2,3,4,5,6],
+            [7,8,9,10,11,12],
+            [13,14,15,16,17,18],
+            [19,20,21,22,23,24]] });
+    $s.textarea; $s.select; $s.dzen; $s.check1; //just for init
+},2000);
+
 
 document.onchange = function(){
     $s.state  = "";
     $s.state  = JSON.stringify($s, null, 4);
 }
-
-