实现非常简单的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-<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;}

// javascriptvar user = new User( 123 );user.set( "name", "Wolfgang" );// html<input type="number" data-bind-123="name" />

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, prop_name, 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, function( evt, prop_name, 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;}

// 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 ); } } // ...}