// 2- با استفاده از جاوا اسکریپت
function DataBinder( object_id ) {
  // ساده میسازیم PubSub یه آبجکت
  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 دیوانه میکنه آدمو
            prop_name = target.getAttribute( data_attr );

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

  // به تغییرات گوش میکنیم
  if ( document.addEventListener ) {
    document.addEventListener( "change", changeHandler, false );
  } else {
    // دیوونه IE8 اینم برا
    document.attachEvent( "onchange", changeHandler );
  }

  // PubSub اعمال تغییرات در دو سر رابطه توسط 
  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;
}

// اینم بذارید توی مدلتون
function User( uid ) {
  // کدای خودتون

  user = {
    // کدای خودتون
    set: function( attr_name, val ) {
      this.attributes[ attr_name ] = val;
      
      binder.publish( uid + ":change", attr_name, val, this );
    }
  }

  // ادامه کدای خودتون
}
//-------------------------------------------------------------------

// 1- با استفاده از جی کوئری
function DataBinder( object_id ) {
  // ساده میسازیم PubSub یه آبجکت
  var pubSub = jQuery({});

  // که رابطه رو تعریف کرده نیاز داریم data یک المان
  // این ریختی: data-bind-<object_id>="<property_name>"
  var data_attr = "bind-" + object_id,
      message = object_id + ":change";

  // گوش کن به تغییرات
  jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
    var $input = jQuery( this );

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

  // اعمال تغییرات در هر دو سر رابطه
  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: {},

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

  binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
    if ( initiator !== user ) {
      user.set( attr_name, new_val );
    }
  });

  return user;
}
//---------------------------
// اینم مدل استفاده ازش

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

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