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

用jquery实现的简单数据双向绑定的更多相关文章

  1. Jquery实现数据双向绑定（赋值和取值），类似AngularJS

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  2. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  3. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  4. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  5. JavaScript实现简单的双向绑定

    很多的前端框架都支持数据双向绑定了,最近正好在看双向绑定的实现,就用Javascript写了几个简单的例子. 几个例子中尝试使用了下面的方式实现双向绑定: 发布/订阅模式 属性劫持 脏数据检测 发布/ ...

  6. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  7. vuejs数据双向绑定原理（get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  8. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. js confirm实现换行

    js中confirm或者alert不识别标签,所以要换行的话可以采用下面方式 \u000d 或者 \r: <script> var res=confirm(\"这是测试工作: \ ...

  2. nginx 代理转发 wcf接口

    前言 以前对比过enginx和其他几个web服务器(IIS,Apache,lighttpd)的处理静态文件的能力,enginx是最好的,甚至超过其他的几倍. 虽说enginx官方声明在Windows上 ...

  3. Angular4 step by step.2

    1.使用CLI命令生成的项目,直接把css ,和 template 给独立到文件中了,看着 `` 扎眼 哇咔咔 2.项目效果图:

  4. 启动memcache 服务器端

    # memcached -d -m 10 -u root -p 11211 -c 256 -P /tmp/memcached.pid -d选项是启动一个守护进程, -m是分配给Memcache使用的内 ...

  5. 简单测试Java线程安全中阻塞同步与非阻塞同步性能

    摘抄自周志明老师的<深入理解Java虚拟机:JVM高级特性与最佳实践>13.2.2 线程安全的实现方法 1.名词解释 同步是指锁哥线程并发访问共享数据时,保证共享数据同一时刻只被一个线程访 ...

  6. 最近使用日期控件时，用到了My97DatePicker控件，单日期控件，记录一下

    以上是使用时的效果,可以自己设定日期有效区间,如下图: 对于起始日期和终止日期的控制如下: <td> <label >起始日期:</label> <input ...

  7. Linux终端和win32控制台文本颜色输出

    在使用putty.secureCRT.XShell等终端仿真器连接linux系统时,ls.vim等工具的输出都含有各种颜色,这些颜色的输出大大地增强了文本的可读性. 通常我们可以使用echo命令加-e ...

  8. 自定义控件实现-今日头条Android APP图集效果

    前提 产品有个新需求,类似今日头条的图集效果 大致看了下UI,大致就是ViewPager,横向滑动切换图片,纵向滑动移动图片,纵向超过一定距离,图片飞出,图集淡出动画退出,支持图片的双击放大. 思路 ...

  9. poj 1155 树形背包

    http://blog.csdn.net/libin56842/article/details/9908199 树形背包: 首先是建树,每个结构体为一个节点,包括下一个点序号,值,和next. tre ...

  10. WHILE (Transact-SQL)

    ---循环 declare @n int declare @rowcount int declare @name varchar(50) create table #temp ( id int ide ...