グリッドエディタ

foreach バインディングを使って、配列の各アイテムにしたがって内容を表示する例です。 アイテムを追加・削除しても、Knockout ではすべてを再レンダリングせずに済みます。 新たなアイテムに応じたエレメントのみがレンダリングされます。 これは、他のリッチ UI コントロール (Validatorなど) の状態が保たれることを意味します。

このサンプルのビルドおよび ASP.NET MVC との統合に関する詳細なステップバイステップのチュートリアルについては、 このブログの記事 を参照してください。

デモ

コード: View

<form action='/someServerSideHandler'>
	<p>欲しいものリスト: <span data-bind='text: gifts().length'>&nbsp;</span> 点</p>
	<table data-bind='visible: gifts().length > 0'>
		<thead>
			<tr>
				<th>名前</th>
				<th>価格</th>
				<th />
			</tr>
		</thead>
		<tbody data-bind='foreach: gifts'>
			<tr>
				<td><input type="text" class='required' data-bind='value: name, uniqueName: true' /></td>
				<td><input type="text" class='required number' data-bind='value: price, uniqueName: true' /></td>
				<td><a href='#' data-bind='click: $root.removeGift'>削除</a></td>
			</tr>
		</tbody>
	</table>

	<button data-bind='click: addGift'>追加</button>
	<button data-bind='enable: gifts().length > 0' type='submit'>登録</button>
</form>

コード: ViewModel

var GiftModel = function(gifts) {
	var self = this;
	self.gifts = ko.observableArray(gifts);

	self.addGift = function() {
		self.gifts.push({
			name: "",
			price: ""
		});
	};

	self.removeGift = function(gift) {
		self.gifts.remove(gift);
	};

	self.save = function(form) {
		alert("次のようにサーバに送信できます: " + ko.utils.stringifyJson(self.gifts));
		// ここで通常のフォーム送信同様に送信する場合、次のように書いてください:
		// ko.utils.postJson($("form")[0], self.gifts);
	};
};

var viewModel = new GiftModel([
	{ name: "高帽子", price: "39.95"},
	{ name: "長いクローク", price: "120.00"}
]);
ko.applyBindings(viewModel, document.getElementById('demo_1'));

// jQuery Validation を起動
$("form").validate({ submitHandler: viewModel.save });