双向数据绑定指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个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比如下面：
=""
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 "broadcasted" 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模型的最简单的实现方法：
现在我们如果想要将User模型属性绑定到UI上，我们只需要将适合的数据特性绑定到对应的HTML元素上。
