Form Input - View Working Example

Events can be used to map a property or attribute of an element to the model. Only one property can be mapped for the event in the markup, so use a custom function if more changes are needed.

Text input

The following example shows how to store changes to a text input in the model.

HTML

        <div id="textInputExample">
            <div>Enter text: <input id="mytextbox" type="text" value="" {}="oninput:value>enteredText" /></div>
            <div>You entered "<span {}="enteredText"></span>"</div>
        </div>
    

Javascript

        let textInputModel = {
            enteredText: ''
        };

        _M_.fill(document.getElementById('textInputExample'), textInputModel);
    

Modified HTML

After entering "Modstache is awesome!" in the text box.

        <div id="textInputExample">
            <div>Enter text: <input id="mytextbox" type="text" value="Modstache is awesome!" {}="oninput:value>enteredText"></div>
            <div>You entered "<span {}="enteredText">Modstache is awesome!</span>"</div>
        </div>
    

Radio Buttons

The following example displays the value of the selected radio button.

HTML

        <div id="radioButtonsExample">
            <div>Select one of the following:</div>
            <div><input id="apple" type="radio" name="fruit" value="Apple" {}="onchange:value>fruit" /><label for="apple">Apple</label></div>
            <div><input id="banana" type="radio" name="fruit" value="Banana" {}="onchange:value>fruit" /><label for="banana">Banana</label></div>
            <div><input id="peach" type="radio" name="fruit" value="Peach" {}="onchange:value>fruit" /><label for="peach">Peach</label></div>
            <div>You selected "<span {}="fruit"></span>"</div>
        </div>
    

Javascript

        let radioButtonModel = {
            fruit: ''
        };

        _M_.fill(document.getElementById('radioButtonsExample'), radioButtonModel);
    

Modified HTML

After clicking on "Apple."

        <div id="radioButtonsExample">
            <div>Select one of the following:</div>
            <div><input id="apple" type="radio" name="fruit" value="Apple" {}="onchange:value>fruit" checked><label for="apple">Apple</label></div>
            <div><input id="banana" type="radio" name="fruit" value="Banana" {}="onchange:value>fruit"><label for="banana">Banana</label></div>
            <div><input id="peach" type="radio" name="fruit" value="Peach" {}="onchange:value>fruit"><label for="peach">Peach</label></div>
            <div>You selected "<span {}="fruit">Apple</span>"</div>
        </div>