<!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. C++的引用本质上等同于C的指针

    本文给出一个很小的例子,通过反汇编后观察认为,C++的引用本质上等同于C的指针. o foo1.cpp v.s. foo2.cpp o 对foo1.cpp 和foo2.cpp进行编译 $ g++ -g ...

  2. 通过mongodump和mongorestore实现Mongodb备份和恢复

    Mongodb自带了mongodump和mongorestore这两个工具来实现对数据的备份和恢复. mongodump能够在Mongodb运行时进行备份,它的工作原理是对运行的Mongodb做查询, ...

  3. StrangeIoc框架学习

    StrangeIoc是一款基于MVCS的一种框架,是对MVC思想的扩展,是专门针对Unity3D开发的一款框架,非常好用. 一.MVCS分别代表什么 MVCS框架是一种模块的分离,一种写代码的规则,目 ...

  4. vue中echarts引入中国地图

    <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...

  5. Python学习之环境搭建及模块引用

    这是我学习Python过程积累的经验和踩过的坑,希望学习Python的新手们能尽量避免,以免不必要的时间浪费.今天也是我第一次接触Python. 基础语法看了两个晚上,所以如果没看的朋友们,抽时间先看 ...

  6. HTML <a>标签的使用

    <a></a>标签称作链接标记,由<a>与</a>所围的文字.图片等可以作为一个链接 Eg:<a href="index.html&qu ...

  7. java对象中含有Integer类型字段转json字符串问题

    问题:对于含有Integer类型字段的java对象,在通过下面这种方式转为json字符串时,Integer类型的字段如果为空的情况下,会默认转化为0,但是我想让它为空的时候直接转化为null,不要默认 ...

  8. javaweb之jsp标签

    1.JSP标签简介 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 2.JSP常用标签 ...

  9. [Java反射基础一]Class类的使用

    任何一个类都是Class类的实例对象,这个实例对象有三种表示方式 第一种表示方式(任何一个类都有一个隐含的静态成员变量class): Class c1 = Foo.class; 第二种表示方式(已知该 ...

  10. Spring课程 Spring入门篇 6-1 Spring AOP API的PointCut、advice的概念及应用

    本节主要是模拟spring aop 的过程. 实现spring aop的过程 这一节老师虽然说是以后在工作中不常用这些api,实际上了解还是有好处的, 我们可以从中模拟一下spring aop的过程. ...