Skip to content

Instantly share code, notes, and snippets.

@devdays

devdays/ojs-knowckout-controltypes-binding.html

Created December 16, 2014 18:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devdays/4ebabb66ba1821b3b6c0 to your computer and use it in GitHub Desktop.
Save devdays/4ebabb66ba1821b3b6c0 to your computer and use it in GitHub Desktop.
Download ZIP
Object JavaScript - Knockout - Binding to HTML Controls
Raw
ojs-knowckout-controltypes-binding.html
<!DOCTYPE html>
<html>
<head>
<title>Binding HTML Controls</title>
</head>
<body>
<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>
</tr>
<tr>
<td class="label">Drop-down list:</td>
<td><select data-bind="options: optionValues, value: selectedOptionValue"> </select></td>
</tr>
<tr>
<td class="label">Multi-select drop-down list:</td>
<td><select multiple="multiple"
data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues">
</select></td>
</tr>
<tr>
<td class="label">Radio buttons:</td>
<td>
<label><input type="radio" value="Alpha"
data-bind="checked: radioSelectedOptionValue" />Alpha</label>
<label><input type="radio" value="Beta"
data-bind="checked: radioSelectedOptionValue" />Beta</label>
<label><input type="radio" value="Gamma"
data-bind="checked: radioSelectedOptionValue" />Gamma</label>
</td>
</tr>
</table>
<script type="text/javascript" src="Scripts/knockout-2.2.1.js"></script>
<script>
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);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment