data binding

this fiddle demonstrates one way to set up two-way databinding between form elements and a js object.

by Sean Furrh

HTML

<form id="watch">
    Name: <input type="text" name="name"/><br/>
    Age: <input type="text" name="age"/><br/>
    <input type="button" onclick="testUnbind()"/>
</form>

JavaScript

obj = {name:"Sean",age:"22"};

bind = function(o,f){
     for(var i in o){    
    	var n=i.trim();
        var $e=$(f).find("[name='"+n+"']");
        if($e.length>0){
            var p=defineGetAndSet(o,n,$e);
            var iName = "_"+n;
            var iValue = o[i];
            o[iName]=iValue;
            console.log("iName="+iName+", iValue="+iValue);
            Object.defineProperty(o,n,p);
        }
    };   
}
unbind = function(o,f){
     for(var i in o){    
    	var n=i.trim();
        var $e=$(f).find("[name='"+n+"']");
        if($e.length>0){
            var val = o["_"+n];
            delete o[n];
            delete o["_"+n];
            o[n]=val;
        }
    };   
}
defineGetAndSet=function(object,propName,element){
    var $e=$(element);
    $e.val(object[propName]);
    $e.on("change",function(e){
        object[propName]=$e.val();
    })
    var p={
        get:function(){
            console.log("getting "+propName);
            return this["_"+propName];
        },
        set:function(v){
            console.log("setting "+propName+" to " + v);
            this["_"+propName]=v;
            $e.val(v);
        }
    }
    return p;
}
 
bind(obj,$("#watch"));

testUnbind = function(){
    unbind(obj,$("#watch"));
    obj.age=43;
    obj.name="doug"
    bind(obj,$("#watch"));
}