TimboKZ/data-binding.html

## data-binding.html
<html>
<head>
  <title>Two-way Data Binding</title>
</head>
<body>
	<input id="input" type="text">
	<button id="change">Set value to "Hello"</button>
	<span>Value: <strong id="value"></strong></span>

	<script>

	// Do nothing if watch() method is already defined
	if(!Object.prototype.watch) {

		// Define watch() method for Object
		Object.defineProperty(Object.prototype, 'watch', {
			value: function(property, handler) {
				var value = this[property];
				var getter = function() {
					return value;
				}
				// Apart from updating the value, setter also fires the handler
				var setter = function(newValue) {
					value = handler.call(this, property, value, newValue);
					return value;
				}
				// Deleting the property, do nothing if the value is a constant
				if(delete this[property]) {
					// Adding the property again, with out getter() and setter()
					Object.defineProperty(this, property, {
						configurable: true,
						get: getter,
						set: setter
					});
				}
			}
		});

	}

	// Initialise input variable
	var input = {
		value: ''
	}
	// Setting up elements
	var inputEl = document.getElementById('input');
	var changeEl = document.getElementById('change');
	var valueEl = document.getElementById('value');
	// Setup watcher to update #input and #value
	input.watch('value', function(property, oldValue, newValue) {
		inputEl.value = newValue;
		valueEl.textContent = newValue;
		return newValue;
	});
    // Updating the value as an example
    input.value = 'Testing';
	// Setup click event for the change button
	changeEl.addEventListener('click', function(event) {
		input.value = 'Hello';
	});
	// Update the variable on input change
	inputEl.addEventListener('keyup', function(event) {
		input.value = inputEl.value;
	});

	</script>
</body>
</html>
	<html>
	<head>
	<title>Two-way Data Binding</title>
	</head>
	<body>
	<input id="input" type="text">
	<button id="change">Set value to "Hello"</button>
	<span>Value: <strong id="value"></strong></span>

	<script>

	// Do nothing if watch() method is already defined
	if(!Object.prototype.watch) {

	// Define watch() method for Object
	Object.defineProperty(Object.prototype, 'watch', {
	value: function(property, handler) {
	var value = this[property];
	var getter = function() {
	return value;
	}
	// Apart from updating the value, setter also fires the handler
	var setter = function(newValue) {
	value = handler.call(this, property, value, newValue);
	return value;
	}
	// Deleting the property, do nothing if the value is a constant
	if(delete this[property]) {
	// Adding the property again, with out getter() and setter()
	Object.defineProperty(this, property, {
	configurable: true,
	get: getter,
	set: setter
	});
	}
	}
	});

	}

	// Initialise input variable
	var input = {
	value: ''
	}
	// Setting up elements
	var inputEl = document.getElementById('input');
	var changeEl = document.getElementById('change');
	var valueEl = document.getElementById('value');
	// Setup watcher to update #input and #value
	input.watch('value', function(property, oldValue, newValue) {
	inputEl.value = newValue;
	valueEl.textContent = newValue;
	return newValue;
	});
	// Updating the value as an example
	input.value = 'Testing';
	// Setup click event for the change button
	changeEl.addEventListener('click', function(event) {
	input.value = 'Hello';
	});
	// Update the variable on input change
	inputEl.addEventListener('keyup', function(event) {
	input.value = inputEl.value;
	});

	</script>
	</body>
	</html>