<!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. jreble安装 in idea

    http://www.cnblogs.com/littlehb/archive/2013/04/19/3031045.html

  2. jquery jgrid filterToolBar beforeSearch 修改postData

    beforeSearch: function() { var posted_data = $("#mygrid").jqGrid('getGridParam,'postData') ...

  3. java服务器访问其他服务器工具类编写

    java服务器访问其他服务器工具类编写适合各种消息推送及微服务交互 package com.xiruo.medbid.components; import com.xiruo.medbid.util. ...

  4. 浅谈Java中的hashcode方法（转载）

    哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有一个方法: 1 public native int hashCode(); 根据 ...

  5. wcf 基本配置

    <system.serviceModel> <services> <service name="ServiceUpdater.ServiceUpdate&quo ...

  6. Splunk和ELK深度对比

    转自:http://blog.51cto.com/splunkchina/1948105 日志处理两大生态Splunk和ELK深度对比 heijunmasd 0人评论 5312人阅读 2017-07- ...

  7. Android 屏蔽recent task 按钮

    Step 1 Add this permission to the manifest.xml file <uses-permission android:name="android.p ...

  8. Java - 多线程中的不变性问题

    这篇记录一下保证并发安全性的策略之——不变性. (注意:是Immutable,不是Invariant!) 将一连串行为组织为一个原子操作以保证不变性条件,或者使用同步机制保证可见性,以防止读到失效数据 ...

  9. Error:Annotation processors must be explicitly declared now.

    环境 Android Studio 3.0 Gradle 3.0.0 gradle 4.1 Error Error:Execution failed for task ':app:javaPreCom ...

  10. HDU 3191 次短路长度和条数

    http://www.cnblogs.com/wally/archive/2013/04/16/3024490.html http://blog.csdn.net/me4546/article/det ...