雙向資料繫結

標籤：trigger   雙向   val   log   object_id   put   return   textarea   事件   

<textarea type="number"  data-bind-123="name" /></textarea><br><br><textarea type="number"  data-bind-456="name1" /></textarea><script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script><script>// object_id 對象idfunction DataBinder(object_id){  //使用jQuery對象做一個簡單訂閱  var pubSub=jQuery({});  var data_attr="bind-"+object_id,    message=object_id+":change";  //監聽change事件  jQuery(document).on("change","[data-"+data_attr+"]",function(eve){    var $input=jQuery(this); //觸發事件    pubSub.trigger(message,[$input.data(data_attr),$input.val()]);  });  //  pubSub.on(message,function(evt,prop_name,new_val){  //    jQuery("[data-"+data_attr+"="+prop_name+"]").each(function(){      var $bound=jQuery(this);      if($bound.is("")){        $bound.html(new_val);      }else{        $bound.html(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.trigger(uid+":change",[attr_name,val,this]);      },      get:function(attr_name){        return this.attributes[attr_name];      },      _binder:binder    };  // Subscribe to PubSub  binder.on(uid+":change",function(evt,attr_name,new_val,initiator){    if(initiator!==user){      user.set(attr_name,new_val);    }  });  return user;}//var user=new User(123);user.set("name","Wolfgang");//var user1=new User(456);user1.set("name1","Wolfgang789");//console.log(user.get("name"));console.log(user1.get("name1"));</script>

通過change事件來實現，1.試圖端change觸發修改服務端dade， 服務端dade修改觸發change修改頁面。

雙向資料繫結