<!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. ServletContextListener知识点

    1 知识点 2 代码演示 import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Da ...

  2. mongodb3.4 远程连接认证失败

    mongodb开启或者关闭授权功能时还是挺麻烦的,需要新建服务键入mongod --auth.为了方便,我这里是建了两个服务,用到哪个就切换至哪个服务. --需要授权 mongod --logpath ...

  3. pycurl安装问题

    pycurl安装问题 之前人写的代码中依赖pycurl,所以准备在ubuntu14.04.4 LTS系统上安装一下.发现了不少问题. Could not run curl-config 最开始遇到问题 ...

  4. JavaScript技巧45招（转）

    原文:45 Useful JavaScript Tips, Tricks and Best Practices作者:Saad Mousliki 在这篇文章里,我将分享一些JavaScript的技巧.秘 ...

  5. 新建文件可选类型插件：SublimeTmpl

    介绍:SublimeTmpl,新建文件可选类型.编辑模版在:SublimeTmpl\templates"文件夹修改 1.安装: 通过 Package Control Package Cont ...

  6. 第八章使用java实现面向对象-File I/O

    java.io.File类用于表示文件(目录) File类只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问 RandomAccessFile java提供的对文件内容的访问,既可以 ...

  7. 微信小程序整理

    目录 开发环境 目录结构 WXML组件 WXSS 数据绑定 条件渲染 列表渲染 模版 事件 引用 路由传参 API 实例TodoList 1.开发环境 开发工具下载(https://mp.weixin ...

  8. SSM+PageHelper+jqGrid实现数据分页

    前言 前几天自己写了一个分页功能,代码逻辑写的很乱今天发现jqGrid这个工具是真好用,故记录下来方便以后使用首先是PageHelper后台分页工具PageHelper的原理是基于拦截器实现的 具体流 ...

  9. tomcat启动编码等部署遇到问题

    版权声明:本文为博主原创文章,转载请注明文章链接.https://blog.csdn.net/xiaoanzi123/article/details/58254318 2017-02-27 21:01 ...

  10. Python 2.x版本和Python3.x版本的不同

    在新的Python版本中,Python3.x虽然在主要的核心语言和模块等方面没有打的改变,但是Python3.x与2.x还是有很大区别的.而且Python3.x与2.x并不兼容. 比如说HTTPSer ...