Skip to content

Instantly share code, notes, and snippets.

@emchateau
Forked from amowu/data-binding.js
Last active December 23, 2020 02:47
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save emchateau/e3057c7e76a50d895e98b6d6bd7404ac to your computer and use it in GitHub Desktop.
Save emchateau/e3057c7e76a50d895e98b6d6bd7404ac to your computer and use it in GitHub Desktop.
Two-way data binding in pure Javascript
// http://stackoverflow.com/a/16484266/754377
function DataBind(element, data) {
this.data = data;
this.element = element;
element.value = data;
element.addEventListener("change", this, false);
}
DataBind.prototype.handleEvent = function(event) {
switch (event.type) {
case "change": this.change(this.element.value);
}
};
DataBind.prototype.change = function(value) {
this.data = value;
this.element.value = value;
};
var obj = new DataBind(document.getElementById("foo"), "initial");
// simulate some JS based changes.
var i = 0;
setInterval(function() {
obj.change(obj.element.value + ++i);
}, 3000);
<pre>Change the value, and the interval will use it.</pre>
<input id="foo">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment