HTML Control types

by Diya_Khan

HTML

<div class="dvHtmlControls">    
<table>
    <tr>
        <th colspan="2">HTML Controls</th>
        <th>Model Values</th>
    </tr>
    <tr>
        <td>Text value (updates on change)</td>                
        <td>
            <input data-bind="value: stringValue" />            
        </td>
        <td><span data-bind="text: stringValue" class="red" /></td>
    </tr>
    <tr>
        <td>Text value (updates on keystroke)</td>                
        <td>
            <input data-bind="value:stringValue,valueUpdate :'afterkeydown'" />
        </td>
        <td><span data-bind="text: stringValue" class="red" /></td>
    </tr>            
    <tr>
        <td>Text value (multiline)</td>            
        <td>
            <textarea data-bind="value: stringValue" ></textarea>
        </td>
        <td><span data-bind="text: stringValue" class="red" /></td>
    </tr>    
    <tr>
        <td>Password</td>
        <td>
            <input type="password" data-bind="value: passwordValue" /> 
        </td>
        <td><span data-bind="text: passwordValue" class="red" /></td>
    </tr>
    <tr>
        <td>Checkbox</td>
        <td>
            <input type="checkbox" data-bind="checked: boolValue" /> 
        </td>
        <td><span data-bind="text: boolValue" class="red" /></td>
    </tr>        
    <tr>
        <td>Dropdown list</td>
        <td>
            <select data-bind="options: optionValues,value: selectedOptionValue "></select> 
        </td>
        <td><span data-bind="text:selectedOptionValue" class="red"/></td>
    </tr>
     <tr>
        <td>Multi select Dropdown list</td>
        <td>
            <select data-bind="options: optionValues,selectedOptions: multiselectedOptionValues" multiple="multiple" width="100px"></select> 
        </td>
        <td><span data-bind="text: multiselectedOptionValues" class="red"/></td>
    </tr>
    <tr>
        <td>Radio buttons</td>
        <td>
         <input type="radio" value="A" data-bind="checked:...

CSS

.dvHtmlControls tr td
{
    font-family: Consolas,Menlo,"Liberation Mono",Courier,monospace;
    font-size: 12px;   
    padding:3px;
    border: 1px solid #DDDDDD;
}
.dvHtmlControls tr th
{
    font-family: Consolas,Menlo,"Liberation Mono",Courier,monospace;
    font-size: 12px;   
    padding:3px;
    border: 1px solid #DDDDDD;
    text-align: center;
    font-weight: bold;
}
.red
{
    color:red;
    font-style: italic;
}
select 
{
    width:150px;
}

JavaScript

var model = function(){
    
    this.stringValue = ko.observable("test");    
    this.passwordValue = ko.observable("password");
    this.boolValue = ko.observable(true);
    this.optionValues = ko.observableArray(["A","B","C"]);
    this.selectedOptionValue = ko.observable("A");
    this.multiselectedOptionValues = ko.observableArray(["A"]);
    this.radioSelectedOptionValue = ko.observable("B");
    this.changeFunction = function(){
        alert('change');         
    };
    };

ko.applyBindings(new model());