function DataBinder(object_id){ //使用一個(gè)jQuery對(duì)象作為簡單的訂閱者發(fā)布者 var pubSub = jQuery({}); //我們希望一個(gè)data元素可以在表單中指明綁定：data-bind-<object_id>="<property_name>"   var data_attr = "bind-" + object_id,   message = object_id + ":change"; //使用data-binding屬性和代理來監(jiān)聽那個(gè)元素上的變化事件 // 以便變化能夠“廣播”到所有的關(guān)聯(lián)對(duì)象  jQuery(document).on("change","[data-" + data_attr + "]",function(evt){  var input = jQuery(this);  pubSub.trigger(message, [ $input.data(data_attr),$input.val()]); }); //PubSub將變化傳播到所有的綁定元素，設(shè)置input標(biāo)簽的值或者其他標(biāo)簽的HTML內(nèi)容  pubSub.on(message,function(evt,prop_name,new_val){  jQuery("[data-" + data_attr + "=" + prop_name + "]").each(function(){  var $bound = jQuery(this);  if($bound.is("input,text area,select")){   $bound.val(new_val);  }else{   $bound.html(new_val);  }  }); }); return pubSub;}

function User(uid){ var binder = new DataBinder(uid),  user = {   atttibutes: {},   //屬性設(shè)置器使用數(shù)據(jù)綁定器PubSub來發(fā)布變化    set: function(attr_name,val){    this.attriures[attr_name] = val;    binder.trigger(uid + ":change", [attr_name, val, this]);   },   get: function(attr_name){    return this.attributes[attr_name];   },   _binder: binder  };  binder.on(uid +":change",function(vet,attr_name,new_val,initiator){   if(initiator !== user){    user.set(attr_name,new_val);   }  })}

//JavaScriptvar user = new User(123);user.set("name","Wolfgang");//html<input type="number" data-bind-123="name" /> 

function DataBinder(object_id){ //創(chuàng)建一個(gè)簡單地PubSub對(duì)象  var pubSub = {  callbacks: {}.  on: function(msg,calssback){   this.callbacks[msg] = this.callbacks[msg] || [];   this.callbacks[msg].push(callback);  },  publish: function(msg){   this.callbacks[msg] = this.callbacks[msg] || [];   for(var i = 0, len = this.callbacks[msg].length; i<lenli++){    this.callbacks[msg][i].apply(this,arguments);   }  } }, data_attr = "data-bind-" + object_id, message = object_id + ":change", changeHandler = function(evt){  var target = evt.target || evt.srcElemnt, //IE8兼容   prop_name = target.getAttribute(data_attr);   if(prop_name && prop_name !== ""){    pubSub.publish(message,prop_name,target.value);   } }; //監(jiān)聽變化事件并代理到PubSub  if(document.addEventListener){  document.addEventListener("change",changeHandler,false); }else{  //IE8使用attachEvent而不是addEventListener    document.attachEvent("onchange",changeHandler); } //PubSub將變化傳播到所有綁定元素  pubSub.on(message,function(vet,prop_name,new)_val){  var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),    tah_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{    elements[i].innerHTML = new_val;   }  } }); return pubSub;}

//在model的設(shè)置器中 function User(uid){//...user = {//...set: function(attr_name,val){ this.attribute[attr_name] = val; //使用“publish”方法  binder.publish(uid+ ":change", attr_name, val,this);  } } //...}