Js原生 双向数据绑定
<!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原生 双向数据绑定的更多相关文章
- 原生js实现双向数据绑定
一.两个model之间的双向绑定 var o = { a: 0 } o.b = o.a + 1; console.log(o.a); // "0" console.log(o.b) ...
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- js实现一个简单的响应式双向数据绑定
一,基本原理 我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义. 我们首先定义一个函数: var obj = { }; ...
- Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- JS 双向数据绑定、单项数据绑定
简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JavaScript实现简单的双向数据绑定
什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...
- vue 双向数据绑定的实现学习（一）
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
- javascript基础修炼(9)——MVVM中双向数据绑定的基本原理
开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Page Appl ...
随机推荐
- HDU 1700 Points on Cycle(向量旋转)
题目链接 水题,卡了下下精度. #include <cstdio> #include <iostream> #include <cmath> using names ...
- URAL 1119. Metro(DP)
水题. #include <cstring> #include <cstdio> #include <string> #include <iostream&g ...
- Android -- 服务组件的使用（1）
1. 效果图
- CSS重新认识（一）
1. 所有的元素都遵循盒子模型,即内容部分+padding(填充部分)+border+margin(外边距部分); 2.我们平常定义的width与height指的内容部分的长宽; 3. 行内元素在不改 ...
- Python之路（一）
学了一整子python,目前看到了处理“列表”的地方,目前列表给我的感觉十分像数组,但不是java中的数组,更像是php中的数组. (1)创建列表的方法:列表名 = [列表项0,列表项1,······ ...
- jq最新前三篇文章高亮显示
/*---------最新前三篇文章高亮显示-------------*/ function latest(){ var color_arr=new Array( "blue", ...
- ASP.NET发布后,功能不响应
题记:稀奇古怪的错误,往往是由低级脑残错误产生的 ASP.NET网站,本地调试一切正常.部署到服务器后,结果登陆按钮就卡住了,点击就是没反应. 浏览器显示Internal Server Error 5 ...
- Python开发问题和解决方案汇集
1.Sublime Text中用Tab批量替换空格Whitespace缩进:Ctrl+A全选代码,Ctrl+Shift+P打开下拉框,输入indent,找到Convert indentation to ...
- segement fault常见错误
1.指针赋值前就用它引用内存,或释放后继续访问它的内容. 2.释放同一块内存两次.
- redis’五种格式的存储与展示
Redis支持持久化只是它的一件武器,另外,它针对不同的需求也提供了多达5种数据存储方式,以最大效率上的实现你的需求,下面分别说一下: 一 string(字符串) string是最简单的类型,你可以 ...