連絡帳

ネストしたデータ構造を編集するかなり一般的な例です。 ViewModel はシンプル、View へのバインドは素直で簡単です。

デモ

コード: View

<h2>連絡先</h2>
<div id='contactsList'>
	<table class='contactsEditor'>
		<thead>
			<tr>
				<th>ファーストネーム</th>
				<th>ラストネーム</th>
				<th>電話番号</th>
			</tr>
		</thead>
		<tbody data-bind="foreach: contacts">
			<tr>
				<td>
					<input data-bind='value: firstName' />
					<div><a href='#' data-bind='click: $root.removeContact'>削除</a></div>
				</td>
				<td><input data-bind='value: lastName' /></td>
				<td>
					<table>
						<tbody data-bind="foreach: phones">
							<tr>
								<td><input data-bind='value: type' /></td>
								<td><input data-bind='value: number' /></td>
								<td><a href='#' data-bind='click: $root.removePhone'>削除</a></td>
							</tr>
						</tbody>
					</table>
					<a href='#' data-bind='click: $root.addPhone'>電話番号を追加</a>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>
	<button data-bind='click: addContact'>連絡先を追加</button>
	<button data-bind='click: save, enable: contacts().length > 0'>JSON形式で保存</button>
</p>

<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>

コード: ViewModel

var initialData = [
	{ firstName: "ダニー", lastName: "ラルッソ", phones: [
			{ type: "携帯", number: "(555) 121-2121" },
			{ type: "電話", number: "(555) 123-4567"}]
	},
	{ firstName: "先生", lastName: "宮城", phones: [
			{ type: "携帯", number: "(555) 444-2222" },
			{ type: "電話", number: "(555) 999-1212"}]
	}
];

var ContactsModel = function(contacts) {
	var self = this;
	self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) {
		return { firstName: contact.firstName, lastName: contact.lastName, phones: ko.observableArray(contact.phones) };
	}));

	self.addContact = function() {
		self.contacts.push({
			firstName: "",
			lastName: "",
			phones: ko.observableArray()
		});
	};

	self.removeContact = function(contact) {
		self.contacts.remove(contact);
	};

	self.addPhone = function(contact) {
		contact.phones.push({
			type: "",
			number: ""
		});
	};

	self.removePhone = function(phone) {
		$.each(self.contacts(), function() { this.phones.remove(phone) })
	};

	self.save = function() {
		self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
	};

	self.lastSavedJson = ko.observable("")
};

ko.applyBindings(new ContactsModel(initialData));