雙向數(shù)據(jù)綁定指的就是，綁定對象屬性的改變到用戶界面的變化的能力，反之亦然。換種說法，如果我們有一個user對象和一個name屬性，一旦我們賦了一個新值給user.name,在UI上就會顯示新的姓名了。同樣地，如果UI包含了一個輸入用戶姓名的輸入框，輸入一個新值就應(yīng)該會使user對象的name屬性做出相應(yīng)的改變。

很多熱門的JS框架客戶端如Ember.js，Angular.js 或者KnockoutJS ，都在最新特性上刊登了雙向數(shù)據(jù)綁定。這并不意味著從零實(shí)現(xiàn)它很難，也不是說需要這些功能的時候，采用這些框架是唯一的選擇。下面的想法實(shí)際上很基礎(chǔ)，可以被認(rèn)為是3步走計劃：

1. 我們需要一個UI元素和屬性相互綁定的方法
2. 我們需要監(jiān)視屬性和UI元素的變化
3. 我們需要讓所有綁定的對象和元素都能感知到變化

還是有很多方法能夠?qū)崿F(xiàn)上面的想法，有一個簡單有效的方法就是使用PubSub模式。 這個思路很簡單：我們使用數(shù)據(jù)特性來為HTML代碼進(jìn)行綁定，所有被綁定在一起的JavaScript對象和DOM元素都會訂閱一個PubSub對象。只要JavaScript對象或者一個HTML輸入元素監(jiān)聽到數(shù)據(jù)的變化時，就會觸發(fā)綁定到PubSub對象上的事件，從而其他綁定的對象和元素都會做出相應(yīng)的變化。

用jQuery做一個簡單的實(shí)現(xiàn)

對于DOM事件的訂閱和發(fā)布，用jQuery實(shí)現(xiàn)起來是非常簡單的，接下來我們就是用Jquery比如下面：

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 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;
}

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", function( evt, attr_name, new_val, initiator ) {
    if ( initiator !== user ) {
      user.set( attr_name, new_val );
    }
  });
 
  return user;
}

現(xiàn)在我們?nèi)绻胍獙ser模型屬性綁定到UI上，我們只需要將適合的數(shù)據(jù)特性綁定到對應(yīng)的HTML元素上。

JS代碼:

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

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

這樣輸入值會自動映射到user對象的name屬性，反之亦然。到此這個簡單實(shí)現(xiàn)就完成啦！

不需要jQuery的實(shí)現(xiàn)

在如今的大多數(shù)項(xiàng)目里，可能已經(jīng)使用了jQuery，因此上面的例子完全可以接受。不過，如果我們需要試著向另一個極端做，并且還刪除對jQuery的依賴，那么怎么做呢？好，證實(shí)一下這么做并不難（尤其是在我們限制只支持IE 8及以上版本的情況下）。最終，我們必須使用一般的javascript實(shí)現(xiàn)一個定制的PubSub并且保留了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;
}

// 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的少于100行的維護(hù)代碼獲得了同樣的結(jié)果。

轉(zhuǎn)載自：http://www.see-source.com/blog/300000038/444#

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。