jQuery实现html双向绑定功能示例


Posted in jQuery onOctober 09, 2017

本文实例讲述了jQuery实现html双向绑定功能。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
var user = new User('123');
$(function(){
user.set( "name", "99" );
});
 function GetData() {
  alert(user.attributes.name);
 }
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.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
   };
 binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
  if ( initiator !== user ) {
   user.set( attr_name, new_val );
  }
 });
  return user;
 }
</script>
</head>
<body>
<input type="text" data-bind-123="name" /><br/>
<input type="button" onclick="GetData();" value="获取数据"></div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 #jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
You might like
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
php析构函数的简单使用说明
2015/08/24 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
vue实现记事本功能
2019/06/26 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python中退出多层循环的方法
2018/11/27 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python输出决策树图形的例子
2019/08/09 Python
python常用运维脚本实例小结
2020/02/14 Python
python实例化对象的具体方法
2020/06/17 Python
实例代码讲解Python 线程池
2020/08/24 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
以下的初始化有什么区别
2013/12/16 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
自动化专业毕业生自荐信
2013/11/01 职场文书
安全教育感言
2014/03/04 职场文书
科学发展观活动总结
2014/08/28 职场文书
商务考察邀请函模板
2015/02/02 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
python xlwt模块的使用解析
2021/04/13 Python