原文：Easy Two-Way Data Binding in Javascript

双向数据绑定指的是当对象的属性发作变化时能够同时转变对应的UI，反之亦然。换句话说，假如我们有一个user对象，这个对象有一个name属性，不管什么时刻你对user.name设置了一个新值，UI也会展现这个新的值。一样的，假如UI包括一个用于数据用户名字的输入框，输入一个新值也会致使user对象的name属性发作响应的转变。

很多盛行的javascript框架，像Ember.js,Angular.js或许KnockoutJS都会把双向数据绑定作为个中的重要特征来宣扬。这并不意味着从头开始完成它很难，也不意味着当我们须要这类功用的时刻，运用这些框架是我们唯一的挑选。内部的潜伏头脑事实上是相称基本的，完成它能够归结为以下三点：

1. 我们须要一种体式格局肯定哪一个UI元素绑定在哪一个属性上。

2. 我们须要监控属性和UI的变化

3. 我们须要把一切绑定的对象和UI元素的变化流传出去。

只管有好多种体式格局去完成这几点，一种简朴高效的要领是我们经由过程宣布定阅者形式来完成。要领很简朴：我们能够运用定制的data属性作为HTML代码中须要绑定的属性。一切的绑定在一起的Javascript对象和DOM元素将会定阅这个宣布定阅对象。任什么时刻候我们检测到不管是Javascript对象亦或是HTML的input元素的变化，我们都是把事宜代办通报给宣布定阅对象，然后经由过程它把一切发作在绑定的对象和元素的的变化通报和播送出去。

一个用jQuery完成的简朴例子

经由过程jQuery完成我们上面议论的东西是相称简朴明了的，由于作为一个盛行的库，它让我们很简朴的完成定阅和宣布DOM事宜，同时我们也能够定制一个：

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-<object_id>="<property_name>"
    var data_attr="bind-"+object_id,
        message=object_id+":change";

    // Listen to chagne events on elements with data-binding attribute and proxy
    // then to the PubSub, so that the change is "broadcasted" to all connected objects
    jQuery(document).on("change","[data-]"+data_attr+"]",function(eve){
        var $input=jQuery(this);

        pubSub.trigger(message,[$input.data(data_attr),$input.val()]);
    });

    // PubSub propagates chagnes to all bound elemetns,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("")){
                $bound.val(new_val);
            }else{
                $bound.html(new_val);
            }
        });
    });
    return pubSub;
}

至于javascript对象，下面是最小化的user数据模型完成的例子：

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 PubSub
    binder.on(uid+":change",function(evt,attr_name,new_val,initiator){
        if(initiator!==user){
            user.set(attr_name,new_val);
        }
    });

    return user;
}

如今，不管什么时刻我们想要绑定一个对象的属性到UI上，我们只需在对应的HTML元素上设置适宜的data属性。

// javascript 
var user=new User(123);
user.set("name","Wolfgang");

// html
<input type="number" data-bind-123="name" />

input输入框上值得变化会自动的映射到user的name属性，反之亦然。功德圆满！

不须要jQuery的完成体式格局

如今的大部分项目平常jQuery都已经在运用啦，所以上面的例子是完整能够接收的。然则假如我们须要完整不依赖jQuery，那末该怎样完成呢？好吧，事实上实在也不难办到（特别是当我们把对IE的支撑只提供IE8以上的支撑）。末了，我们只是要经由过程宣布定阅者形式来视察DOM事宜罢了。

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 + ":change",

  changeHandler = function( evt ) {
    var target = evt.target || evt.srcElement, // IE8 compatibility
        prop_name = target.getAttribute( data_attr );

    if ( prop_name && prop_name !== "" ) {
      pubSub.publish( message, prop_name, target.value );
    }
  };

 // Listen to change events and proxy to PubSub
  if ( document.addEventListener ) {
    document.addEventListener( "change", changeHandler, false );
  } else {
    // IE8 uses attachEvent instead of addEventListener
    document.attachEvent( "onchange", 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;
}

数据模型能够坚持稳定，除了在setter中对jQuery中trigger要领的挪用，我们能够经由过程我们在PubSub中自定义的publish要领来替代。

// 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", attr_name, val, this );
    }
  }

  // ...
}

我们又一次经由过程一百行不到，又可保护的纯javascript完成了我们想要的效果。