双向数据绑定

Posted 2020-08-27 代码顽童

<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 对象id
function 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修改页面。