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

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

bigGuo

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

阅读量8.6k

点赞数

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

本文链接：https://blog.csdn.net/big_guo/article/details/40113309

版权

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

摘要由CSDN通过智能技术生成

<!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-"