<!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. Maven的目录结构和常用命令

    一.Maven项目的目录结构  1.顶级目录结构   src:该目录主要存放的是项目的源代码文件. target:该目录是项目编译后产生的一个目录,主要存放的是编译后的.class文件. pom.xm ...

  2. Java入门系列-15-封装

    为什么要封装 Student stu=new Student(); stu.age=-10; 上面的代码中 age 属性被随意访问,容易产生不合理的赋值 什么是封装 封装:将类的某些信息隐藏在内部,不 ...

  3. mysql之调优概论

    一  简介 咱们先不说cpu的频率,内存的大小(这个和索引一样重要,但不是本文讨论的内容),硬盘的寻道时间.想起mysql的调优,最起码的必须知道explain执行计划,慢sql日志,老旧的profi ...

  4. unity 中 protobuff 的用法 一句话攻略

    (一)unity 添加 pb 的 dll 支持.1,从GitHub上下载protobuf源码 (源码链接:https://github.com/google/protobuf),找到 csharp 分 ...

  5. 反汇编调试Android

    https://code.google.com/p/android/issues/detail?id=73076 http://my.unix-center.net/~Simon_fu/?p=527 ...

  6. 合理使用线程池 ThreadPool.QueueUserWorkItem()

    //==>自建线程 new Thread(() => { //线程任务 Console.WriteLine(Thread.CurrentThread.ManagedThreadId); } ...

  7. Springboot事务使用与回滚

    Springboot中事务的使用: 1.启动类加上@EnableTransactionManagement注解,开启事务支持(其实默认是开启的). 2.在使用事务的public(只有public支持事 ...

  8. 一台电脑启动多个tomcat

    原文 http://dong-shuai22-126-com.iteye.com/blog/1763666 如果现在一台机器上已经部署了一个tomcat服务,无论这个tomcat是否已经注册为服务了, ...

  9. HOST文件配置

    HOST文件配置位置:C:\Windows\System32\drivers\etc\HOSTS 127.0.0.1 localhost 127.0.0.1 app.weilan.com 127.0. ...

  10. is not mapped 错误改正

    我出现的错误是:oorg.hibernate.hql.ast.QuerySyntaxException: DEPT is not mapped [from DEPT] 配置文件如下: <?xml ...