twoway/test/index.html

Simple Zero dependency 2way databinding library

<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>HTML Preselected Select</h2>
        <div data-property="size2"></div>
        <select data-model="size2">
            <option value='xs'>XS</option>
            <option value='s'>S</option>
            <option selected value='m'>M</option>
            <option value='l'>L</option>
        </select>
    </div>

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

    <div>
        <h2>Select Multiple</h2>
        <div data-property="meal"></div>
        <select data-model="meal" multiple>
            <option value='pizza'>Pizza</option>
            <option value='tortellini'>Tortellini</option>
            <option value='lasagne'>Lasagne</option>
        </select>
    </div>

    <div>
        <h2>Resetable Select Multiple</h2>
        <div data-property="meal2"></div>
        <select data-model="meal2" multiple>
            <option value='pizza'>Pizza</option>
            <option value='tortellini'>Tortellini</option>
            <option value='lasagne'>Lasagne</option>
        </select>

        <button id="resetMealSelection">RESET</button>
    </div>


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

<script src="../lib/bundle.js"></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;
    });
    document.getElementById("resetMealSelection").addEventListener('click', function (e) {
        store.meal2 = ['pizza'];
    });

    var store = twoway("#app", {
            number: null,
            color: null,
            size: null,
            size2: null,
            size3: 'm',
            message: null,
            eventName: null,
            meal: ['lasagne'],
            meal2: null,
            planet: {mars: true, jupiter: false},
            name: "Fabs",
            programmaticName: "Fabs",
        }
    )
</script>