array reading and writing for many elements && ability to set any leaf param by object

static/index.html

@@ -28,23 +28,38 @@
             <tbody id="numberTable">
                 <tr>
                     <td>table template line 1</td>
+                    <td style='background-color: blue;'>table template line 1</td>
                 </tr>
                 <tr style='background-color: gray;'>
                     <td>table template line 2</td>
+                    <td style='background-color: red;'>table template line 2</td>
                 </tr>
             </tbody>
         </table>
         <table>
+            <thead>
+                <th> age</th>
+                <th> married</th>
+                <th> surname</th>
+                <th> name</th>
+                <th> note</th>
+            </thead>
             <tbody id="hashTable">
                 <tr>
                     <td class='age'></td>
-                    <td>asdfad</td>
+                    <td><input type='checkbox' class='married'></td>
                     <td class='surname'></td>
-                    <td>zzzzZZZ</td>
                     <td class='name'></td>
+                    <td><textarea class='note'></textarea></td>
                 </tr>
             </tbody>
         </table>
+        <div id="checks">
+            <label><input type='checkbox' class='check'><span class='description'></span><br/></label>
+        </div>
+        <div id="radios">
+            <label><input type='radio' class='radio'><span class='description'></span><br/></label>
+        </div>
         <strong>Use $s variable for accessing data in DOM</strong>
         <pre id='state' style='background-color: lightgray;'>
             2 seconds timeout

static/index.js

@@ -1,15 +1,29 @@
 function nbInit($s){
-    function nBind(callback, prop){
+    function nBind(callback, prop, direction){
+        direction = direction || "write";
         for (var selector in $s){
+            var result = [];
             selector = prop || selector; //change selector to passed if it
 
-            var items = document.querySelectorAll(selector);
-            items     = items.length ? items : [document.getElementById(selector)]; 
-            items     = items[0]     ? items :  document.getElementsByName(selector); 
+            var items = [document.getElementById(selector)]; 
+            items     = items[0]     ? items :  document.querySelectorAll(selector);
+            items     = items.length ? items :  document.getElementsByName(selector); 
+            items     = items.length ? items :  document.getElementsByClassName(selector); 
             for (var i=0,item=items[i];i<items.length;i++,item=items[i]){
-                callback(item, $s, selector)
+                if (direction == "write" && item.children.length == 0 && Array.isArray($s[selector])){
+                    callback(item, $s, selector, $s[selector][i]);
+                }
+                else {
+                    var res = callback(item, $s, selector);
+                    if (typeof res !== "undefined"){
+                        result.push(res)
+                    }
+                }
             }
 
+            
+            $s[selector] = result.length ? (result.length == 1 ? result[0] : result) : $s[selector];
+
             if (prop) return;  //exit if selector passed, no iteration
         }
     }
@@ -18,6 +32,12 @@ function nbInit($s){
         nBind(function (item, $s, selector, value, key){
             value = typeof value === 'undefined' ? $s[selector] : value;
             var keyExists = typeof key !== 'undefined';
+            if (!item.children.length && !Array.isArray(value) && typeof value === 'object'){ //hash array on single leaf node -> set attrs on the tag
+                for (var key in value){
+                    item[key] = value[key];
+                }
+                return;
+            }
             if (keyExists && "value" in item){ //if hash key-value pair. Usable for select > option
                 item.value = key;
             }
@@ -84,32 +104,34 @@ function nbInit($s){
             else {
                 item.innerText = value; // do not try to overwrite value on option nodes
             }
-        },prop);
+        },prop, "write");
     }
 
-    function syncFromDOM(){
+    function syncFromDOM(prop){
         nBind(function(item, $s, selector){
             if (item.type === 'radio'){
                 if (item.checked) 
-                    $s[selector] = item.value; 
+                    return item.value; 
                 return;
             }
             if (item.type === 'checkbox'){
-                $s[selector] = item.checked;
-                return;
+                return item.checked;
             }
-            $s[selector] = item["value" in item ? "value" : "innerText"]; 
-        });
+            return item["value" in item ? "value" : "innerText"]; 
+        },prop, "read");
     }
 
     syncToDOM();
 
     var scopeProxy = new Proxy($s,{
         get(target, prop){
-            if (!(prop in target) && (document.querySelectorAll(prop).length || document.getElementById(prop) || document.getElementsByName(prop).length)){
+            if (!(prop in target) && (document.getElementById(prop) || 
+                                      document.querySelectorAll(prop).length || 
+                                      document.getElementsByName(prop).length ||
+                                      document.getElementsByClassName(prop).length)){
                 target[prop] = null;
             }
-            syncFromDOM();
+            syncFromDOM(prop);
             return target[prop];
         },
         set(target, prop, value){
@@ -137,17 +159,66 @@ setTimeout(function(){
                     [7,8,9,10,11,12],
                     [13,14,15,16,17,18],
                     /*[19,20,21,22,23,24]*/],
+    //numberTable: [[[{"": "--",
+                     //M:  "Male",
+                     //F:  "Female",
+                     //X:  "Xenomorph"}],
+                    //[{"": "--",
+                     //M:  "Male",
+                     //F:  "Female",
+                     //X:  "Xenomorph"}],
+                    //[{"": "--",
+                     //M:  "Male",
+                     //F:  "Female",
+                     //X:  "Xenomorph"}]],
+                    //[[{"": "--",
+                     //M:  "Male",
+                     //F:  "Female",
+                     //X:  "Xenomorph"}],
+                    //[{"": "--",
+                     //M:  "Male",
+                     //F:  "Female",
+                     //X:  "Xenomorph"}],
+                    //[{"": "--",
+                     //M:  "Male",
+                     //F:  "Female",
+                     //X:  "Xenomorph"}]]],
     hashTable: [{ name: "Ivan",
                   surname: "Ivanovv",
-                  age: "57"},
+                  age: "57",
+                  note: {innerText: "Buhaet", name: 'ivanovvsTextArea'},
+                  married: true},
                 { name: "Petr",
                   surname: "Petroff",
-                  age: "17"},
+                  age: "17",
+                  note: "Tyolki v golove",
+                  married: false,
+                  },
                 { name: "Mary",
                   surname: "Tester",
-                  age: "27"} ]});
+                  married: true,
+                  note: "Ovulyashka",
+                  age: "27"} ],
+    checks: [
+            {check: {name: "first", checked: true},
+             description: "first check"},
+            {check: {name: "second", checked: false},
+             description: "second check"},
+            {check: {name: "third", checked: true},
+             description: "third check"},
+    ],
+    radios: [
+            {radio: {name: "sexism", value: "M", checked: true},
+             description: "Male"},
+            {radio: {name: "sexism", value: "F"},
+             description: "Female"},
+            {radio: {name: "racism", value: "white", checked: true},
+             description: "White"},
+            {radio: {name: "racism", value: "black"},
+             description: "Black"}, ]
+    });
 
-    $s.textarea; $s.select; $s.dzen; $s.check1; //just for init
+    $s.textarea; $s.select; $s.dzen; $s.check1; $s.note; $s.married; //just for init
 
     document.onchange();
 },2000);