欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
微信小程序制作工具_JS原生数据双向绑定完成代
时间: 2021-01-11 15:25 浏览次数:
JS原生态数据信息双重关联完成编码 文中根据案例编码给大伙儿详细介绍了JS原生态数据信息双重关联难题,编码简易易懂,十分非常好,具备参照效仿使用价值,必须的的朋友参
JS原生数据双向绑定实现代码       本文通过实例代码给大家介绍了JS原生数据双向绑定问题,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
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 = "bind-" + object_id, message = object_id + ":input", timeIn; changeHandler = function( evt ) { var target = evt.target || evt.srcElement, // patibility 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" bind-1="name" / span bind-1="name" /span script var DBind = new DBind( 1 ); DBind.set( "name", "" ); /script /body /html /span

效果示例:

总结

以上所述是小编给大家介绍的JS原生数据双向绑定实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园