A Pen by Karri Rasinmäki.

Data-Binder.markdown

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.

index.html

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

script.js

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]);