双向数据绑定指的就是，绑定对象属性 的改变到用户 界面的变化的能力，反之亦然。换种说法，如果我们有一个 user对象和一个 name属性 ，一旦我们赋了一个 新值给user.name,在UI上就会显示 新的姓名了。同样地，如果UI包含了一个 输入用户 姓名的输入框，输入一个 新值就应该会使user对象的name属性 做出相应的改变。
很多热门的JS框架客户端如Ember.js，Angular.js 或者KnockoutJS ，都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难，也不是说需要这些功能 的时候，采用这些框架是唯一的选择。下面的想法实际上很基础，可以被认为是3步走计划：
我们需要一个 UI元素和属性 相互绑定的方法
我们需要监视属性 和UI元素的变化
我们需要让所有绑定的对象和元素都能感知到变化
还是有很多方法 能够实现上面的想法，有一个 简单有效的方法 就是使用PubSub模式。 这个思路很简单：我们使用数据特性来为HTML代码 进行绑定，所有被绑定在一起的JavaScript对象和DOM元素都会订阅 一个 PubSub对象。只要JavaScript对象或者一个 HTML输入元素监听到数据的变化时，就会触发绑定到PubSub对象上的事件，从而其他绑定的对象和元素都会做出相应的变化。
用jQuery做一个 简单的实现
对于DOM事件的订阅 和发布，用jQuery实现起来是非常简单的，接下来我们就是用Jquery比如下面：
rush:js;">
function DataBinder( object_id ) {
// Use a jQuery object as simple PubSub
var pubSub = jQuery({});
// We expect a `data` element specifying the binding
// in the form: data-bind-
=""
var data_attr = "bind-" + object_id,message = object_id + ":change";
// Listen to change events on elements with the data-binding attribute and proxy
// them to the PubSub,so that the change is "bro adcasted" to all connected objects
jQuery( document ).on( "change","[data-" + data_attr + "]",function( evt ) {
var $input = jQuery( this );
pubSub.trigger( message,[ $input.data( data_attr ),$input.val() ] );
});
// PubSub propagates changes to all bound elements,setting value of
// input tags or HTML content of other tags
pubSub.on( message,function( evt,prop_name,new_val ) {
jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
var $bound = jQuery( this );
if ( $bound.is("input,textarea,select") ) {
$bound.val( new_val );
} else {
$bound.html( new_val );
}
});
});
return pubSub;
}
对于上面这个实现来说，下面是一个 User模型的最简单的实现方法 ：
rush:js;">
function User( uid ) {
var binder = new DataBinder( uid ),user = {
attributes: {},// The attribute setter publish changes using the DataBinder PubSub
set: function( attr_name,val ) {
this.attributes[ attr_name ] = val;
binder.trigger( uid + ":change",[ attr_name,val,this ] );
},get: function( attr_name ) {
return this.attributes[ attr_name ];
},_binder: binder
};
// Subscribe to the PubSub
binder.on( uid + ":change",attr_name,new_val,initiator ) {
if ( initiator !== user ) {
user.set( attr_name,new_val );
}
});
return user;
}
现在我们如果想要将User模型属性 绑定到UI上，我们只需要将适合的数据特性绑定到对应的HTML元素上。
rush:js;">
// javascript
var user = new User( 123 );
user.set( "name","Wolfgang" );
// html
这样输入值会自动 映射到user对象的name属性 ，反之
亦然。到此这个简单实现就完成啦！
不需要jQuery的实现
在如今的大多数项目里，可能已经使用了jQuery，因此上面的例子完全可以接受。不过，如果我们需要试着向另一个 极端做，并且还删除 对jQuery的依赖，那么怎么做呢？好，证实一下这么做并不难（尤其是在我们限制只支持 IE 8及以上版本的情况下）。最终，我们必须使用一般的javascript实现一个 定制的PubSub并且保留了DOM事件:
rush:js;">
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 =,len = this.callbacks[ msg ].length; i < len; i++ ) {
this.callbacks[ msg ][ i ].apply( this,arguments );
}
}
},data_attr = "data-bind-" + object_id,message = object_id + ":change",changeHandler = function( evt ) {
var target = evt.target || evt.srcElement,// IE compatibility
prop_name = target.getAttribute( data_attr );
if ( prop_name && prop_name !== "" ) {
pubSub.publish( message,target.value );
}
};
// Listen to change events and proxy to PubSub
if ( document.addEventListener ) {
document.addEventListener( "change",changeHandler,false );
} else {
// IE uses attachEvent instead of addEventListener
document.attachEvent( "onchange",changeHandler );
}
// PubSub propagates changes to all bound elements
pubSub.on( message,new_val ) {
var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),tag_name;
for ( var i =,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;
}
除了设置器里调用 jQuery的trigger方法 外，模型可以保持一样。调用 trigger方法 将替代为调用 我们定制的具有不同特征的PubSub的publish方法 ：
rush:js;">
// In the model's setter:
function User( uid ) {
// ...
user = {
// ...
set: function( attr_name,val ) {
this.attributes[ attr_name ] = val;
// Use the `publish` method
binder.publish( uid + ":change",this );
}
}
// ...
}
我们又一次通过一百行不到，又可维护的纯javascript完成了我们想要的结果。
以上内容 就是关于js双向数据绑定的相关教程，希望对大家学习有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
