Skip to content

Instantly share code, notes, and snippets.

@ik5

ik5/binder.js

Last active August 29, 2015 14:08
Show Gist options
  • Save ik5/1c9bbf07736462a72501 to your computer and use it in GitHub Desktop.
Save ik5/1c9bbf07736462a72501 to your computer and use it in GitHub Desktop.
Download ZIP
attempt to create simple data binder
Raw
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;
}
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment