Knockoutjs.com - Control types example

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

by ernestohs

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.2.1.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' /> 
            </tr> 
            <tr> 
                <td class='label'>Password:</td> 
                <td data-bind='text: passwordValue' /> 
            </tr> 
            <tr> 
                <td class='label'>Bool value:</td> 
                <td data-bind='text: booleanValue() ? "True" : "False"' /> 
            </tr> 
            <tr> 
                <td class='label'>Selected option:</td> 
                <td data-bind='text: selectedOptionValue' /> 
            </tr> 
            <tr> 
                <td class='label'>Multi-selected options:</td> 
                <td data-bind='text: multipleSelectedOptionValues' /> 
            </tr> 
            <tr> 
                <td class='label'>Radio button selection:</td> 
                <td data-bind='text: radioSelectedOptionValue' /> 
            </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 data-bind='value: passwordValue' type='password' /></td> 
        </tr> 
        <tr> 
            <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);