nanobind/static/index.js

function nbInit($s){
    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.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]){
                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
        }
    }

    function syncToDOM(prop){
        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;
            }
            if (typeof value === "boolean" && item.type !== 'checkbox'){ //boolean means visibility, except checkbox
                if (value){
                    item.style.display = "originalDisplay" in item ? item.originalDisplay : "";
                }
                else {
                    item.originalDisplay = item.style.display;
                    item.style.display   = "none";
                }
                return;
            }
            if (item.type === 'radio' && !keyExists){ //radiogroup set
                if (item.value === value){ //only item with right value to set
                    item.checked = true;
                }
                return;
            }
            if (item.type === 'checkbox' && !keyExists){ //checkbox setting by boolean
                item.checked = !!value;
                return;
            }
            if (item.children.length && typeof value === "object"){ //recursive fill
                item.copy = item.copy || item.cloneNode(true); //original node
                var originalChildren = item.copy.children;
                var i = 0;
                var isArray = Array.isArray(value);      //different logic for array and objects
                if (!isArray){ // if first key in array find as class name in one of subnodes
                    var classFound = false;
                    for (var key in value){
                        if (item.getElementsByClassName(key).length){
                            classFound = true;
                            break;
                        }
                    }
                    if (classFound){
                        for (var key in value){
                            var classSubnodes = item.getElementsByClassName(key);
                            for (var i=0;i<classSubnodes.length;i++){
                                arguments.callee(classSubnodes[i], $s, selector, value[key]); // recursively fill subnode with that data. No reason to pass a key, because key are class selector, not value for option
                            }
                        }
                        return;
                    }
                }
                item.innerHTML = "";                     //remove sub nodes
                for (var key in value){ //otherwise iterate over array or object
                    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){ //default logic: set text or value to data value
                item["value" in item ? "value" : "innerText"] = value;
            }
            else {
                item.innerText = value; // do not try to overwrite value on option nodes
            }
        },prop, "write");
    }

    function syncFromDOM(prop){
        nBind(function(item, $s, selector){
            if (item.type === 'radio'){
                if (item.checked) 
                    return item.value; 
                return;
            }
            if (item.type === 'checkbox'){
                return item.checked;
            }
            return item["value" in item ? "value" : "innerText"]; 
        },prop, "read");
    }

    syncToDOM();

    var scopeProxy = new Proxy($s,{
        get(target, prop){
            if (!(prop in target) && (document.getElementById(prop) || 
                                      document.querySelectorAll(prop).length || 
                                      document.getElementsByName(prop).length ||
                                      document.getElementsByClassName(prop).length)){
                target[prop] = null;
            }
            syncFromDOM(prop);
            return target[prop];
        },
        set(target, prop, value){
            //syncFromDOM();
            target[prop] = value
            syncToDOM(prop);
            return true;
        },
    })

    return scopeProxy;
}

var $s;

setTimeout(function(){
    $s = nbInit({
    text1: "txt",
    p1: "para",
    select: {"": "--",
             M:  "Male",
             F:  "Female",
             X:  "Xenomorph"},
    numberTable: [[1,2,3,4,5,6],
                    [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",
                  note: {innerText: "Buhaet", name: 'ivanovvsTextArea'},
                  married: true},
                { name: "Petr",
                  surname: "Petroff",
                  age: "17",
                  note: "Tyolki v golove",
                  married: false,
                  },
                { name: "Mary",
                  surname: "Tester",
                  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; $s.note; $s.married; //just for init

    document.onchange();
},2000);


document.onchange = function(){
    $s.state  = "";
    $s.state  = JSON.stringify($s, null, 4);
}