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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 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图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Vue实现简单的跑马灯
2020/05/25 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
python 修改本地网络配置的方法
2019/08/14 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
小学校长竞聘演讲稿
2014/05/16 职场文书
暑假学习心得体会
2014/09/02 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2015年元旦标语大全
2014/12/09 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
python读取mnist数据集方法案例详解
2021/09/04 Python