console
function DataBinder(object_id){
var pubSub={
callbacks:{},
on: function (msg,callback){
this.callbacks[msg]=this.callbacks[msg]||[];
this.callbacks[msg].push(callback);
},
publish:function(msg){
console.log(msg,arguments)
this.callbacks[msg]=this.callbacks[msg]||[];
for(var i=0,len=this.callbacks[msg].length;i<len;i++){
this.callbacks[msg][i].apply(this,arguments);
}
}
},
data_attr="data-bind-"+object_id,
message=object_id+":change",yuan
changeHandler=function(evt){
var target=evt.target||evt.srcElemnt;
prop_name=target.getAttribute(data_attr);
if (prop_name&&prop_name!==""){
pubSub.publish(message,prop_name,target.value);
}
};
if (document.addEventListener){
document.addEventListener('change',changeHandler,false);
}else{
document.attachEvent("onchange",changeHandler);
}
pubSub.on(message,function(vet,prop_name,new_val){
var elements=document.querySelectorAll("["+data_attr+"="+prop_name+"]"),
tag_name;
for (var i=0,len=elements.length;i<len;i++){
tag_name=elements[i].tagName.toLowerCase();
if(tag_name==="input"||tag_name==="textarea"||tag_name==="select"){
elements[i].value=new_val;
}else{
element[i].innerHTML=new_val;
}
}
});
return pubSub;
}
function User(uid){
var binder=new DataBinder(uid),
user={
attributes:{},
set:function(attr_name,val){
this.attributes[attr_name]=val;
binder.publish(uid+":change",attr_name,val);
},
get:function(attr_name){
return this.attributes[attr_name];
},
};
return user;
}
var user=new User(123);
user.set("name","wolfgang")
<input type="text" data-bind-123="name"/>