‚̧Newlywed Party Monsters
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    dom-binding-stream

    1.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

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

    Install

    npm i dom-binding-stream

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar