Knockout.js 日本語ドキュメント

各種 Form 部品

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

デモ

ViewModel の値

テキスト値:
パスワード:
真偽値:
選択された値
(ドロップダウン):
選択された値
(複数選択):
選択された値
(ラジオボタン):

Form 部品

テキスト値
(変更時に更新):
テキスト値
(タイプ時に更新):
テキスト値
(複数行):
パスワード:
チェックボックス:
ドロップダウンリスト:
複数選択リスト:
ラジオボタン:

コード: 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);

side menu