コレクションを操る

foreach バインディングを使ってコレクションをレンダリングする方法を示すサンプルです。

エレメントの内容は foreach バインディングによって、 コレクションに含まれるアイテムそれぞれのために繰り返し生成されます。 また、foreach は容易にネストできます。 Knockout は DOM の変更を必要最小限に留めます。 「レンダリング時刻を表示」を有効にして、アイテムが追加された時に他の DOM エレメントに影響がないことを確認して下さい。

デモ

コード: View

<h2>子だくさん名簿</h2>
<ul data-bind="foreach: people">
	<li>
		<div>
			<span data-bind="text: name"> </span> さんの <span data-bind='text: children().length'>&nbsp;</span> 人のお子様:
			<a href='#' data-bind='click: addChild '>また産まれた！</a>
			<span class='renderTime' data-bind='visible: $root.showRenderTimes'>
				(<span data-bind='text: new Date().getSeconds()' > </span>秒 にレンダリング)
			</span>
		</div>
		<ul data-bind="foreach: children">
			<li>
				<span data-bind="text: $data"> </span>
				<span class='renderTime' data-bind='visible: $root.showRenderTimes'>
					(<span data-bind='text: new Date().getSeconds()' > </span>秒 にレンダリング)
				</span>
			</li>
		</ul>
	</li>
</ul>
<label><input data-bind='checked: showRenderTimes' type='checkbox' /> レンダリング時刻を表示</label> 

コード: ViewModel

// 自分の名前と子を保持し、新たな子を追加するメソッドをもつ Person クラス
var Person = function(name, children) {
	this.name = name;
	this.children = ko.observableArray(children);

	this.addChild = function() {
		this.children.push("新しいお子様");
	}.bind(this);
}

// 汎化した UI の状態を保持するが、UI の実装に依存しない ViewModel
var viewModel = {
	people: [
		new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
		new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
		new Person("Charles", ["Cayenne", "Cleopatra"])
	],
	showRenderTimes: ko.observable(false)
};

ko.applyBindings(viewModel);