Knockoutjs.com - Control types example

http://knockoutjs.com/examples/controlTypes.html

by kougiland

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div class='liveExample'> 
    
    <div class="readout">
        <h3>What's in the model?</h3>
        <table>
            <tr>
                <td class="label">Text value:</td>
                <td data-bind="text: stringValue"></td>
            </tr>
            <tr>
                <td class="label">Password:</td>
                <td data-bind="text: passwordValue"></td>
            </tr>
            <tr>
                <td class="label">Bool value:</td>
                <td data-bind='text: booleanValue() ? "True" : "False"'></td>
            </tr>
            <tr>
                <td class="label">Selected option:</td>
                <td data-bind="text: selectedOptionValue"></td>
            </tr>
            <tr>
                <td class="label">Multi-selected options:</td>
                <td data-bind="text: multipleSelectedOptionValues"></td>
            </tr>
            <tr>
                <td class="label">Radio button selection:</td>
                <td data-bind="text: radioSelectedOptionValue"></td>
            </tr>
        </table>
    </div>
     
    <h3>HTML controls</h3>
    <table>
        <tr>
            <td class="label">Text value (updates on change):</td>
            <td><input data-bind="value: stringValue" /></td>
        </tr>
        <tr>
            <td class="label">Text value (updates on keystroke):</td>
            <td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
        </tr>
        <tr>
            <td class="label">Text value (multi-line):</td>
            <td><textarea data-bind="value: stringValue"> </textarea></td>
        </tr>
        <tr>
            <td class="label">Password:</td>
            <td><input type="password" data-bind="value: passwordValue" /></td>
        </tr>
        <tr>
            <td class="label">Checkbox:</td>
            <td><input type="checkbox" data-bind="checked: booleanValue" /></td>
...

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.readout { width: 17em; float: right; }
.readout td { width: 50%; }
tr { vertical-align: top }
td { padding: 0.2em 0.2em 0.6em 0.2em; }
td.label { text-align: right; padding-right: 0.5em; }
input[type=radio] { margin: 0 0.25em 0 0.25em }

JavaScript

var viewModel = {
    stringValue: ko.observable("Hello"),
    passwordValue: ko.observable("mypass"),
    booleanValue: ko.observable(true),
    optionValues: ["Alpha", "Beta", "Gamma"],
    selectedOptionValue: ko.observable("Gamma"),
    multipleSelectedOptionValues: ko.observable(["Alpha"]),
    radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);