Databinding

Experimenting with writing a two way databinding service.

by zargyle

HTML

<div>Update the input and it will use what you wrote</div>
<input type="text" bind="test">

JavaScript

var Z = (function() {
    var bindings = {};
  
    function Binding(element) {
        this.element = element;
        element.onchange = function(value) {
            element.value = value;   
        }
    }
    
    // Get elements to bind
    var arr_elms = arr_elms = document.body.getElementsByTagName("*");
    for (var i = 0; i < arr_elms.length; i++) {
       if(arr_elms[i].getAttribute("bind") != null){
         // Add value and binding object
         bindings[arr_elms[i].getAttribute("bind")] = "";
         bindings["$$" + arr_elms[i].getAttribute("bind")] = new Binding(arr_elms[i]);
       }
    }
    
    return bindings;
    
}());

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

/* 
   Watch for values changed programmatically,
   Update the appropriate Binding object
*/
var Zclone = clone(Z);
setInterval(function(){
    for (var key in Z) {
        // Programmatic change
        if (Z[key] != Zclone[key]) {
            Zclone[key] = Z[key];
            Z["$$" + key].element.value = Z[key];
        }
        // DOM change
        else if (Z[key] != Z["$$"+key].element.value) {
            Z[key] = Z["$$"+key].element.value;
        }
    }
}, 1400);

// simulate some JS based changes.
var i = 0;
setInterval(function () {
    Z.test = Z.test + ++i;
}, 3000);