Skip to content

Instantly share code, notes, and snippets.

@karrirasinmaki
Last active January 3, 2016 01:29
Show Gist options
  • Save karrirasinmaki/8389066 to your computer and use it in GitHub Desktop.
Save karrirasinmaki/8389066 to your computer and use it in GitHub Desktop.
A Pen by Karri Rasinmäki.

Data Binder

Data binding example. Makes a link between items, so changing data in one item changes every linked items' data.

A Pen by Karri Rasinmäki on CodePen.

License.

<h1>Data Binder</h1>
<h4>Data binding example. Makes a link between items, so changing data in one item changes every linked items' data.</h4>
<hr>
<label for="name">Name:</label>
<input type="text" name="name" value="" class="nameBind">
<br>
Your name is <b class="nameBind"></b>
<br><br>
<label>Let's test our data binding with text area</label><br>
<textarea class="textareaBind"></textarea><br>
Your story is supposed to appear under here:
<div class="textareaBind"></div>
<br>
var DataBinder = {
// This stores connected items in lists
connect: function(items) {
return new DataBinder.Connection(items);
}
};
DataBinder.Connection = function(items) {
this.items = [];
this.connect(items);
this._value = "";
};
DataBinder.Connection.prototype = {
// Define setter and getter for "value"
// to ensure connection update on value change
get value() { return this._value; },
set value(v) { this.updateConnection(v); },
// Set connection item value
setValue: function setValueFn(item, value) {
if(item.nodeName !== undefined) {
if(item.value !== undefined) item.value = value;
else item.textContent = value;
}
},
// Updates connection items with new value
updateConnection: function updateConnectionFn(newValue) {
var items = this.items;
for(var i=items.length-1; i>=0; --i) {
this.setValue(items[i], newValue);
}
this._value = newValue;
},
// Listens for value change
handleEvent: function listenerFn(e) {
this.updateConnection(e.srcElement.value);
},
addListener: function addListenerFn(item) {
if(item.nodeName !== undefined) {
item.addEventListener("input", this, false);
item.addEventListener("change", this, false);
}
},
// Connect items to connection
connect: function connectFn(items) {
var _items = this.items;
for(var i=items.length-1; i>=0; --i) {
var a = items[i];
if(a === undefined || a === null) continue;
// Add listener
this.addListener(a);
_items.push(a);
}
}
};
// Make new connection between these elements
// and stores connection to var
// Now connection.value holds value of connection
var nameConn = DataBinder.connect(document.getElementsByClassName("nameBind"));
var textareaConn = DataBinder.connect(document.getElementsByClassName("textareaBind"));
// Changing connection value calls connection update
textareaConn.value = "Hello!";
// You can also add more items to connection later
var newItem = document.createElement("input");
newItem.type = "text";
document.body.appendChild(newItem);
nameConn.connect([newItem]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment