用原生js实现数据双向绑定
来源:互联网 发布:如何发送网络短信 编辑:程序博客网 时间:2024/04/30 19:02
<!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>
0 0
- 用原生js实现数据双向绑定
- js原生代码实现数据双向绑定
- 原生js 实现双向数据绑定
- JS原生数据双向绑定
- 原生JS实现angular的双向数据绑定
- js实现双向数据绑定
- 使用原生js onkeyup+jQuery实现简单的双向数据绑定
- js发布订阅实现双向数据绑定
- vue.js双向数据绑定实现原理
- 用原生Javascript对象中的访问器属性实现双向数据绑定
- 手写JS双向数据绑定
- vue.js双向数据绑定
- Vue:实现双向数据绑定
- jq 实现数据双向绑定
- Vue.js学习 Item4 -- 数据双向绑定
- vue.js表单数据双向绑定
- Angular JS中的数据双向绑定
- angular.js学习(1)--双向数据绑定
- iOS完整学习路线图
- JSP转发和重定向的区别
- 翻译:Linux的电源管理架构
- Android 广播、EventBus、观察者模式
- C++科学计算库GSL在Windows下的配置
- 用原生js实现数据双向绑定
- Perceptron Learning Algorithm(python实现)
- test
- 解决Android Studio的ADB not responding错误
- C/C++框架和库
- 使用OC实现图书管理系统
- 技术人员如何去面试?
- HTTP笔记(三)HTTP的method
- Servlet 实现下载功能