用jquery实现的简单数据双向绑定

最新推荐文章于 2022-09-27 13:36:45 发布

bigGuo

最新推荐文章于 2022-09-27 13:36:45 发布

阅读量8.7k

点赞数

分类专栏： web前端技术-数据双向绑定

本文链接：https://blog.youkuaiyun.com/big_guo/article/details/40113309

版权

web前端技术-数据双向绑定专栏收录该内容

0 篇文章

订阅专栏

这是一个HTML示例，展示了如何使用jQuery实现简单的数据双向绑定。通过创建DataBinder函数和User对象，当输入框中数据变化时，相关span元素会实时更新显示，实现了属性name的双向绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
	<input type="text" data-bind-0=name />
	<span data-bind-0="name" ></span>
	<script type="text/javascript">

	function DataBinder(object_id){
		var pubSub = jQuery({});
		var data_attr = "bind-"+object_id,
			message = object_id+":change";
		jQuery(document).on("change","[data-" + data_attr +"]",function(evt){
			var $input = jQuery(this);
			pubSub.trigger(message, [$input.attr("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("input,textarea,select")) {
					$bound.val(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
	        };
       
          return user;
	}

	var user = new User(0);
	user.set("name","text");
	
	</script>
</body>
</html>