各種 Form 部品

リファレンスとして、各種 Form 部品へのバインディングのサンプルを掲載します。 ドロップダウンリストやラジオボタンなどバインドする方法を明確にするため、 ViewModel は単純化しています。

デモ

コード: View

<div class="readout">
	<h3>ViewModel の値</h3>
	<table>
		<tr>
			<td class="label">テキスト値:</td>
			<td data-bind="text: stringValue"></td>
		</tr>
		<tr>
			<td class="label">パスワード:</td>
			<td data-bind="text: passwordValue"></td>
		</tr>
		<tr>
			<td class="label">真偽値:</td>
			<td data-bind='text: booleanValue() ? "True" : "False"'></td>
		</tr>
		<tr>
			<td class="label">選択された値:</td>
			<td data-bind="text: selectedOptionValue"></td>
		</tr>
		<tr>
			<td class="label">選択された値 (複数選択):</td>
			<td data-bind="text: multipleSelectedOptionValues"></td>
		</tr>
		<tr>
			<td class="label">ラジオボタンの選択された値:</td>
			<td data-bind="text: radioSelectedOptionValue"></td>
		</tr>
	</table>
</div>
 
<h3>Form 部品</h3>
<table>
	<tr>
		<td class="label">テキスト値 (変更時=フォーカスアウト時に更新):</td>
		<td><input data-bind="value: stringValue" /></td>
	</tr>
	<tr>
		<td class="label">テキスト値 (タイプ時に更新):</td>
		<td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
	</tr>
	<tr>
		<td class="label">テキスト値 (複数行):</td>
		<td><textarea data-bind="value: stringValue"> </textarea></td>
	</tr>
	<tr>
		<td class="label">パスワード:</td>
		<td><input type="password" data-bind="value: passwordValue" /></td>
	</tr>
	<tr>
		<td class="label">チェックボックス:</td>
		<td><input type="checkbox" data-bind="checked: booleanValue" /></td>
	</tr>
	<tr>
		<td class="label">ドロップダウンリスト:</td>
		<td><select data-bind="options: optionValues, value: selectedOptionValue"></select></td>
	</tr>
	<tr>
		<td class="label">複数選択リスト:</td>
		<td><select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>
	</tr>
	<tr>
		<td class="label">ラジオボタン:</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>

コード: ViewModel

var viewModel = {
	stringValue : ko.observable("こんにちわ"),
	passwordValue : ko.observable("hogehoge"),
	booleanValue : ko.observable(true),
	optionValues : ["Alpha", "Beta", "Gamma"],
	selectedOptionValue : ko.observable("Gamma"),
	multipleSelectedOptionValues : ko.observable(["Alpha"]),
	radioSelectedOptionValue : ko.observable("Beta")
};
ko.applyBindings(viewModel);