<!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. spring源码学习之路---IOC容器初始化要义之bean定义载入（五）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 最近工作很忙,时间不多,研究 ...

  2. Window对象简介

    Window对象是JavaScript层级中的顶层对象. Window对象表示一个浏览器窗口或一个框架,它在<body>或<frameset>出现时被自动创建. Window对 ...

  3. Spring MVC和Struts2的比较的优点

    Spring MVC和Struts2的区别: 机制:spring mvc的入口是servlet,而struts2是filter(这里要指出,filter和servlet是不同的.以前认为filter是 ...

  4. 分享一个在线生成站点地图SiteMap制作工具

    站点地图SiteMap的好处是很大的,对Seo很有好处,能够更方便.迅速的让搜索引擎收录.WordPress 有不少生成Google Sitemap 的工具,但是有些只是针对WordPress的系统的 ...

  5. How does controller listen to service?

    Polling. The Controller periodically asks the Service for the latest data. IMHO, this option sucks, ...

  6. CI框架不能有Index控制器

    今天部署了ci框架,想用用它.创建别的控制器没什么错误.但是我创建了一个Index控制器,并访问了index方法,报错了.但是直接在方法中写输出就没事.而且方法名称改为其他部位index的也能访问. ...

  7. Rocky4.2下安装金仓v7数据库(KingbaseES)

    1.准备操作系统 1.1 系统登录界面 1.2 操作系统版本信息 jdbh:~ # uname -ra Linux jdbh -x86_64 # SMP Fri Dec :: CST x86_64 G ...

  8. 【HDU4419 Colourful Rectangle】 线段树面积并

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4419 题目大意:给你n个矩形,每个矩形都有一种颜色,矩形覆盖会出现另外一种颜色,问你所有矩形中不同的颜 ...

  9. WooCommerce代码收集

    修改首页和分类页面每页产品数量 每页显示多少产品默认跟随设置 » 阅读设置 » 博客页面至多显示的值,若要产品索引页和博文索引页使用不同的设置,可以使用下面的代码为产品索引页单独设置每页产品数. ad ...

  10. 过河问题nyoj47

    时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话,大家是无论如何也不敢过桥去的.不幸的是 ...