twoway/docs/index.html

Simple Zero dependency 2way databinding library

<h1>TwoWay</h1>

<div id=app>
    <div>
        <h2>Simple Input</h2>
        <div data-property="number"></div>
        <input data-model="number" type="number">
    </div>

    <div>
        <h2>Prefilled Input</h2>
        <div data-property="name"></div>
        <input data-model="name" type="text">
    </div>


    <div>
        <h2>Update Event</h2>
        <div data-property="eventName"></div>
        <input  id="updateEvent" data-model="eventName" type="text">
    </div>

    <div>
        <h2>Programmatic Input</h2>
        <div data-property="programmaticName"></div>
        <input data-model="programmaticName" type="text">
        <button onclick="store.programmaticName = 'Admin'">Set 'Admin'</button>
    </div>

    <div>
        <h2>Radiobox</h2>
        <div data-property="color"></div>
        <label>
            <input name="color" type="radio" value="red" data-model="color"> red
        </label>
        <label>
            <input name="color" type="radio" value="blue" data-model="color"> blue
        </label>
    </div>


    <div>
        <h2>Checkbox</h2>
        <div data-property="planet"></div>
        <div data-property="planet.mars"></div>
        <label>
            <input type="checkbox" value="mars" data-model="planet"> Mars
        </label>
        <label>
            <input type="checkbox" value="jupiter" data-model="planet"> Jupiter
        </label>
        <button id="resetSelection">RESET</button>
    </div>

    <div>
        <h2>Select</h2>
        <div data-property="size"></div>
        <select data-model="size">
            <option value='xs'>XS</option>
            <option value='s'>S</option>
            <option value='m'>M</option>
            <option value='l'>L</option>
        </select>
    </div>


    <div>
        <h2>Textarea</h2>
        <div data-property="message"></div>
        <textarea data-model="message">
        </textarea>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/twoway@0.0.16"></script>


<script>
    document.getElementById("updateEvent").addEventListener('update', function(e) {
        alert(e.detail);
    });

    document.getElementById("resetSelection").addEventListener('click', function(e) {
        store.planet.mars = true;
        store.planet.jupiter = false;
    });

    var store = twoway("#app", {
            number: null,
            color: null,
            size: null,
            message: null,
            eventName: null,
            planet: {mars: true, jupiter: false},
            name: "Fabs",
            programmaticName: "Fabs",
        }
    )
</script>