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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery插件实现图片轮播效果
Oct 19 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
JS实现简易计算器
2020/02/14 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python搭建微信公众平台
2016/02/09 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Django--权限Permissions的例子
2019/08/28 Python
Python简单实现区域生长方式
2020/01/16 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
python 常见的反爬虫策略
2020/09/27 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
蓬莱阁导游词
2015/02/04 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
《角的度量》教学反思
2016/02/18 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python