<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo</title>

    <script>

        function DataBinder( object_id ) {

            // Create a simple PubSub object

            var pubSub = {

                        callbacks: {},

                        on: function( msg, callback ) {

                            this.callbacks[ msg ] = this.callbacks[ msg ] || [];

                            this.callbacks[ msg ].push( callback );

                        },

                        publish: function( msg ) {

                            this.callbacks[ msg ] = this.callbacks[ msg ] || [];

                            for ( var i = 0, len = this.callbacks[ msg ].length; i < len; i++ ) {

                                this.callbacks[ msg ][ i ].apply( this, arguments );

                            }

                        }

                    },

                    data_attr = "data-bind-" + object_id,

                    message = object_id + ":input",

                    timeIn;

                    changeHandler = function( evt ) {

                        var target = evt.target || evt.srcElement, // IE8 compatibility

                                prop_name = target.getAttribute( data_attr );

                        if ( prop_name && prop_name !== "" ) {

                            clearTimeout(timeIn);

                            timeIn = setTimeout(function(){

                                pubSub.publish( message, prop_name, target.value );

                            },50);

                        }

                    };

            // Listen to change events and proxy to PubSub

            if ( document.addEventListener ) {

                document.addEventListener( "input", changeHandler, false );

            } else {

                // IE8 uses attachEvent instead of addEventListener

                document.attachEvent( "oninput", changeHandler );

            }

            // PubSub propagates changes to all bound elements

            pubSub.on( message, function( evt, prop_name, new_val ) {

                var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),

                        tag_name;

                for ( var i = 0, len = elements.length; i < len; i++ ) {

                    tag_name = elements[ i ].tagName.toLowerCase();

                    if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {

                        elements[ i ].value = new_val;

                    } else {

                        elements[ i ].innerHTML = new_val;

                    }

                }

            });

            return pubSub;

        }

        function DBind( uid ) {

            var binder = new DataBinder( uid ),

            user = {

                // ...

                attributes: {},

                set: function( attr_name, val ) {

                    this.attributes[ attr_name ] = val;

                    // Use the `publish` method

                    binder.publish( uid + ":input", attr_name, val, this );

                },

                get: function( attr_name ) {

                    return this.attributes[ attr_name ];

                },

                _binder: binder

            };

            // Subscribe to the PubSub

            binder.on( uid + ":input", function( evt, attr_name, new_val, initiator ) {

                if ( initiator !== user ) {

                    user.set( attr_name, new_val );

                }

            });

            return user;

        }

    </script>

</head>

<body>

<input type="text" data-bind-1="name" />

<span data-bind-1="name"></span>

<script>

    var DBind = new DBind( 1 );

    DBind.set( "name", "黄奇" );

</script>

</body>

</html>

Js原生 双向数据绑定的更多相关文章

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

    一.两个model之间的双向绑定 var o = { a: 0 } o.b = o.a + 1; console.log(o.a); // "0" console.log(o.b) ...

  2. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  3. js实现一个简单的响应式双向数据绑定

    一,基本原理 我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义. 我们首先定义一个函数: var obj = { }; ...

  4. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  5. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  6. JS 双向数据绑定、单项数据绑定

    简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

  8. vue 双向数据绑定的实现学习（一）

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

  9. javascript基础修炼(9)——MVVM中双向数据绑定的基本原理

    开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Page Appl ...

随机推荐

  1. CF 9D. How many trees?(dp)

    题目链接 以前做过类似的,USACO,2.3,开始数组开小了,导致数据乱了,然后超数据范围了,.. #include <cstdio> #include <iostream> ...

  2. 【BZOJ1034】[ZJOI2008]泡泡堂BNB 贪心

    Description 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡堂.每一场比赛前,对阵 ...

  3. BZOJ3625: [Codeforces Round #250]小朋友和二叉树

    Description 我们的小朋友很喜欢计算机科学,而且尤其喜欢二叉树.考虑一个含有n个互异正整数的序列c[1],c[2],...,c[n].如果一棵带点权的有根二叉树满足其所有顶点的权值都在集合{ ...

  4. window下 配置gitlab ssh非端口22端口

    git config --global user.name "jack" git config --global user.email "jackluo@xxx.com& ...

  5. Java Web页面跳转

    Java Web的页面跳转分服务器跳转和客户端跳转: 服务器端跳转  的特点是:跳转之后浏览器的地址栏不会发生任何变化,在使用rquest属性范围时,能将request属性保存到跳转页.执行到跳转语句 ...

  6. 已知树的前序、中序，求后序的c++实现&已知树的后序、中序，求前序的c++实现

    #include"iostream" using namespace std; int pre[30]; int in[30]; int post[30]; int indexOf ...

  7. IIS 注册4.0 Framework

    打开cmd ,运行如下命令  C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i      

  8. Html5 与 Html4 的区别

    HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...

  9. 【HDU 3401 Trade】 单调队列优化dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3401 题目大意:现在要你去炒股,给你每天的开盘价值,每股买入价值为ap,卖出价值为bp,每天最多买as ...

  10. 解决谷歌浏览器和360浏览器 input 自动填充淡黄色背景色的问题

     input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}