ik5/binder.js

## binder.js
// based based on
// http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/

function PropBack() {
    var prop   = [
        { name: 'value', callback: function(obj, content) { jQuery(obj).val(content);           } },
        { name: 'html',  callback: function(obj, content) { jQuery(obj).html(content);          } },
        { name: 'text',  callback: function(obj, content) { jQuery(obj).text(content);          } },
        { name: 'title', callback: function(obj, content) { jQuery(obj).attr('title', content); } },
        { name: 'name',  callback: function(obj, content) { jQuery(obj).attr('name', content);  } },
        { name: 'id',    callback: function(obj, content) { jQuery(obj).attr('id', content);    } },
        { name: 'css',   callback: function(obj, content) { jQuery(obj).css(content);           } },
        { name: 'for',   callback: function(obj, content) { jQuery(obj).attr('for', content);   } },
    ];


    var actions = {
        add: function(name, callback) {
            return prop.push({name: name, callback: callback});
        },
        remove: function(name) {
            var id = jQuery.map(prop, function(value, idx){
                if (value.name === name) {
                    return idx;
                }
            });
            if (id.length > 0) {
              prop.splice(id, 1);
            }

        },

        update: function(name, callback) {
            var id = jQuery.map(prop, function(value, idx){
                if (value.name === name) {
                    return idx;
                }
            });
            if (id.length > 0) {
                prop.splice(id, 0, {name, callback});
            } else {
                prop.push({name, callback});
            }

        },

       list: function() { return prop; }
    }

    return actions;
}

var props = new PropBack();

function Binder(object_id) {
    // using jQuery as event tool
    var events = jQuery({});

    var data_attr = "bind-" + object_id;
    var message = object_id + ":change";

    jQuery(document).on("change", "[data-" + data_attr + "-value]", function(e){
        var $input = jQuery(this);

        events.trigger(message, [$input.attr('data-' + data_attr + '-value'), $input.val()]);
    });

    events.on(message, function(e, prop_name, new_val) {
        jQuery.each(props.list(), function(idx, val){
            jQuery("[data-"+ data_attr + '-' + val['name'] + "=" + prop_name + "]").each(function(){
                val['callback'](this, new_val);
            });

        });
    });

    return events;
}

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf8">
  </head>
  <body>
    <div>
      <span data-bind-123-text="firstName"
        data-bind-123-title="firstName">&nbsp;</span><br>
      <input type="text" data-bind-123-value="firstName"
      data-bind-123-title="firstName"><br><br>

      <label data-bind-123-for="first_id" data-bind-123-text="lastName"
        data-bind-123-title="lastName">{}</label><br>
      <input type="text" data-bind-123-id="first_id" data-bind-123-value="lastName"
      data-bind-123-title="lastName"><br><br>

      <span data-bind-123-text="fullName" data-bind-123-title="fullName">&nbsp;</span><br>
      <input type="text" data-bind-123-value="fullName"
      data-bind-123-title="fullName"><br><br>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="binder.js"></script>
    <script src="user.js"></script>
    <script>
      var user = new User(123);
      user.set('firstName', 'Admin');
      user.set('lastName', 'User');
      user.set('fullName', user.get('firstName') + ' ' + user.get('lastName'));
      user.set('first_id', "user_123");
    </script>
  </body>
</html>

## user.js
function User(uid) {
    var binder = new Binder(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(e, attr_name, new_val, initiator) {
        if (initiator !== user) {
            user.set(attr_name, new_val);
        }
    });

    return user;
}
	// based based on
	// http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/

	function PropBack() {
	var prop = [
	{ name: 'value', callback: function(obj, content) { jQuery(obj).val(content); } },
	{ name: 'html', callback: function(obj, content) { jQuery(obj).html(content); } },
	{ name: 'text', callback: function(obj, content) { jQuery(obj).text(content); } },
	{ name: 'title', callback: function(obj, content) { jQuery(obj).attr('title', content); } },
	{ name: 'name', callback: function(obj, content) { jQuery(obj).attr('name', content); } },
	{ name: 'id', callback: function(obj, content) { jQuery(obj).attr('id', content); } },
	{ name: 'css', callback: function(obj, content) { jQuery(obj).css(content); } },
	{ name: 'for', callback: function(obj, content) { jQuery(obj).attr('for', content); } },
	];


	var actions = {
	add: function(name, callback) {
	return prop.push({name: name, callback: callback});
	},
	remove: function(name) {
	var id = jQuery.map(prop, function(value, idx){
	if (value.name === name) {
	return idx;
	}
	});
	if (id.length > 0) {
	prop.splice(id, 1);
	}

	},

	update: function(name, callback) {
	var id = jQuery.map(prop, function(value, idx){
	if (value.name === name) {
	return idx;
	}
	});
	if (id.length > 0) {
	prop.splice(id, 0, {name, callback});
	} else {
	prop.push({name, callback});
	}

	},

	list: function() { return prop; }
	}

	return actions;
	}

	var props = new PropBack();

	function Binder(object_id) {
	// using jQuery as event tool
	var events = jQuery({});

	var data_attr = "bind-" + object_id;
	var message = object_id + ":change";

	jQuery(document).on("change", "[data-" + data_attr + "-value]", function(e){
	var $input = jQuery(this);

	events.trigger(message, [$input.attr('data-' + data_attr + '-value'), $input.val()]);
	});

	events.on(message, function(e, prop_name, new_val) {
	jQuery.each(props.list(), function(idx, val){
	jQuery("[data-"+ data_attr + '-' + val['name'] + "=" + prop_name + "]").each(function(){
	val['callback'](this, new_val);
	});

	});
	});

	return events;
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf8">
	</head>
	<body>
	<div>
	<span data-bind-123-text="firstName"
	data-bind-123-title="firstName"> </span><br>
	<input type="text" data-bind-123-value="firstName"
	data-bind-123-title="firstName"><br><br>

	<label data-bind-123-for="first_id" data-bind-123-text="lastName"
	data-bind-123-title="lastName">{}</label><br>
	<input type="text" data-bind-123-id="first_id" data-bind-123-value="lastName"
	data-bind-123-title="lastName"><br><br>

	<span data-bind-123-text="fullName" data-bind-123-title="fullName"> </span><br>
	<input type="text" data-bind-123-value="fullName"
	data-bind-123-title="fullName"><br><br>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="binder.js"></script>
	<script src="user.js"></script>
	<script>
	var user = new User(123);
	user.set('firstName', 'Admin');
	user.set('lastName', 'User');
	user.set('fullName', user.get('firstName') + ' ' + user.get('lastName'));
	user.set('first_id', "user_123");
	</script>
	</body>
	</html>
	function User(uid) {
	var binder = new Binder(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(e, attr_name, new_val, initiator) {
	if (initiator !== user) {
	user.set(attr_name, new_val);
	}
	});

	return user;
	}