nanobind/static/index.js

function nbInit($s){
    function nBind(callback, prop){
        for (var selector in $s){
            selector = prop || selector;

            var 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(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' && !keyExists){
                item.checked = !!value;
                return;
            }
            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(){
        nBind(function(item, $s, selector){
            if (item.type === 'radio'){
                if (item.checked) 
                    $s[selector] = item.value; 
                return;
            }
            if (item.type === 'checkbox'){
                $s[selector] = item.checked;
                return;
            }
            $s[selector] = item["value" in item ? "value" : "innerText"]; 
        });
    }

    syncToDOM();

    var scopeProxy = new Proxy($s,{
        get(target, prop){
            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();
            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"},
    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);
}