<!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. URAL 1635. Mnemonics and Palindromes(DP)

    题目链接 本来用区间DP,3次方的复杂度,T了,看了看题解,降维,直接二次方的复杂度可以解.然后折腾一下输出路径..终于过了. #include <cstring> #include &l ...

  2. Hibernate4Maven

    How to create a Maven project with Hibernate libs? This blog will be a demo to describe this issue. ...

  3. linux共享内存实验

    顾名思义,消息队列就是一些消息的列表,用户可以在消息队列中添加消息和读取消息等.从这点上看,消息队列具有一定的FIFO特性,但是它可以实现消息的随机查询,比FIFO具有更大的优势.同时,这些消息又是存 ...

  4. FileUpload文件上传控件

    1.FileUpload控件的主要功能是向指定目录上传文件.FileUpload控件不会自动上传控件,而需要设置相关的事件处理程序,然后在程序中实现文件上传. 2.FileUpload控件常见的属性 ...

  5. Effective STL（第7条）

    第7条:如果容器中包含了通过new操作创建的指针,切忌在容器对象析构前将指针delete掉 //向一个vector中添加多个new出来的对象 void doSomething(){ vector< ...

  6. HTML第一节课

    html的基本结构<html> <head> <title> 页面标题 </title> </head> <boby> 页面内容 ...

  7. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  8. TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.

    我今天写程序的时候遇到的问题,开始完成功能后没发觉.当再次部署程序更新时候,出的错误,通过firebug发现提示是TypeError: 'stepUp' called on an object tha ...

  9. 示例在同一台机器上使用RMAN克隆数据库

    1.查看主库ZDJS并使用RMAM进行备份 [oracle@std ~]$ sqlplus '/as sysdba' SQL*Plus: Release - Production on Wed Jan ...

  10. Solved Unable to copy the source file ./installer/services.sh to the destination file /etc/vmware-t

    Sometimes when you intall vmwaretools there will be some problems such as "Unable to copy the s ...