首页 > 代码库 > 观察者模式（3）－－双向数据绑定
观察者模式（3）－－双向数据绑定
实现数据的双向绑定最直接的方式就是PubSub模式。
（1）当model发生变化时，触发Model change事件，然后通过相应事件处理函数更新界面。--‘model-update-event‘
（2）当界面更新时，触发UI change事件，然后通过相应事件处理函数更新Model，以及绑定在Model上的其他界面控件。--‘ui-update-event‘
对于所有支持双向绑定的页面控件来说，当控件的‘值‘发生变化时，会触发‘ui-update-event‘事件。（这里只处理包含‘t-binding‘属性的控件）。
当Model订阅了（监听）‘ui-update-event‘，相应的界面改动会更新Model。
大致的原理为：
function DataBinder(){ //发布／订阅封装 var pubSub={ handlers:{}, on:function(event,callback){ if(!this.handlers[event]){ this.handlers[event]=[]; } this.handlers[event].push(callback); }, publish:function(event){ var handler=this.handlers[event]; if(handler){ for(var i=0;i<handler.length;i++){ handler[i](); } } } }; changeHandler=fucntion(e){ var target=e.target||e.srcElement; var prop_name=event.getAttribute(‘t-binding‘); if(prop_name && prop_name!==‘‘){ pubSub.publish(‘ui-update-event‘,prop_name,target.value); }; }; //监听事件变化（这里监听keyup和change事件）,并代理到pubSub上。 if(document.addEventListener){ document.addEventListener(‘keyup‘,changeHandler,false); document.addEventListener(‘change‘,changeHandler,false); }else{ //兼容ie8 document.attachEvent(‘keyup‘,changeHandler); document.attarEvent(‘change‘,changeHandler); }; //pubSub将变化传播到所有绑定元素上。 pubSub.on(‘model-update-event‘,function(propName,propValue){ var eles=document.querySelectorAll(‘[t-binding="‘+propName+‘"]‘); for(var i=0;i<eles.length;i++){ var eleType=eles[i].tagName.toLowerCase(); //更新UI界面上元素的内容 if(eleType==‘input‘ || eleType==‘textarea‘ || eleType==‘select‘ ){ eles[i].value=propValue; }else{ eles[i].innerHTML=propValue; } } }
观察者模式（3）－－双向数据绑定
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。