Proxy Object Data Bind Experiment

by Felipe Alfaro

HTML

<strong io-html="name"></strong>
<p io-html="skill"></p>
<p io-html="colors[0]"></p>


<input io-model="name" type="text">
<input io-model="skill" type="text">
<input io-model="colors[0]" type="text">

JavaScript

var elsIoHtml = [],
	elsIoModel = [];
function analyzeIoElements(){
	elsIoHtml.length = 0;
	elsIoModel.length = 0;
	var allElements = document.getElementsByTagName('*');
    for(var i = 0, n = allElements.length; i < n; i++){
        if (allElements[i].getAttribute('io-html') !== null){
            elsIoHtml.push(allElements[i]);
        }
        if (allElements[i].getAttribute('io-model') !== null){
            elsIoModel.push(allElements[i]);
        }
    }
}
function writeModels(){
	for(var i = 0; i < elsIoModel.length; i++){
        var el = elsIoModel[i],
        	query = el.getAttribute('io-model'),
            keyName = query.split('.')[0].split('[')[0];
        el.ioBind = {
        	'query': query,
            'key': keyName
        }
        el.value = eval('ioData.'+query);
    }
}
function runIoModels(){
	for(var i = 0; i < elsIoModel.length; i++){
    	elsIoModel[i].oninput = function(){
        	var query = this.ioBind.query,
            	newValue = this.value;
            
            console.log( 'ioData.'+query+' = "'+newValue+'";' );
            
            eval( 'ioData.'+query+' = "'+newValue+'";' );
            
            //ioData[ioDataKey] = this.value;
        };
    }
}
var ioData = new Proxy({}, {
    set: function(target, name, receiver){
        target[name] = receiver;
        [].forEach.call(elsIoHtml, function(el){
        	var query = el.getAttribute('io-html'),
            	keyName = query.split('.')[0].split('[')[0];
        	if( ioData[keyName] ){
                var queryData = 'ioData.'+query;
                if(keyName==name){el.innerHTML = eval(queryData);}
            }

        });
    },
    get: function(target, name) {
        return target[name];
    }
});

// RUN -----------------------------------------------------------
analyzeIoElements();


ioData.name = '<h1>Vaporeon</h1>';
ioData.skill = 'Surf';
ioData.colors = ['blue', 'white', 'black']


writeModels();
runIoModels();