dom-binding-stream

Binds to a DOM node, and emits changes of any inputs/textareas/selects inside it.

This module expects a DOM node with either <textarea>, <input>, or <select> tags as children somewhere inside it (can be as deep in the tree as you want). Those elements should then have the attribute data-binding which contains a keypath to emit updates under.

Example

Live demo.

Given some HTML that looks like this:

<main>
	<div>
		<label>Select box</label>
		<select data-binding="select" value="foo">
		<option>Foo</option>
		<option>Bar</option>
		<option>Baz</option>
		</select>
	</div>
	<div>
		<label>Text Input</label>
		<input data-binding="text">
	</div>
	<div>
		<label>Radio Button Input</label>
		<input type="radio" name="radio" value="foo" data-binding="radio">
		<input type="radio" name="radio" value="bar" data-binding="radio">
		<input type="radio" name="radio" value="baz" data-binding="radio">
	</div>
</main>

We can set up the binding and listen for changes like so:

var domBinding = require("../");
var map = require("through2-map").obj;
var merge = require("object-merge-stream");

var output = document.getElementById("output");

domBinding("main") // Listen for changed inputs
	.pipe(merge()) // Merge all the changes together
	.pipe(map(log)); // Log merged changes to console

function log(data) {
	// Log the changed data to the console
	console.log(data);
}