リストを改良する

シンプルなリスト の例に基づき、 さらにアイテムを削除する機能とリストをソートする機能を追加します。 「削除」と「ソート」のボタンは、状況に応じてクリックできないようになります。 (アイテムが1件もない場合など)

HTML コードを見ると、実装のために必要なコードがどれだけ少ないかが分かります。

デモ

コード: View

<form data-bind="submit: addItem">
	新しいアイテム
	<input type="text" data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
	<button type="submit" data-bind="enable: itemToAdd().length > 0">追加</button>
</form>
<h4>アイテム一覧</h4>
<select multiple="multiple" width="50"
		data-bind="options: allItems, selectedOptions: selectedItems"> </select>
<div>
	<button data-bind="click: removeSelected, enable: selectedItems().length > 0">削除</button>
	<button data-bind="click: sortItems, enable: allItems().length > 1">ソート</button>
</div>

コード: ViewModel

var BetterListModel = function() {
	this.itemToAdd = ko.observable("");
	this.allItems = ko.observableArray(["リコッタチーズ", "エシャロット", "ロマネスコ", "オリーブオイル", "イタリアンパセリ", "パルミジャーノチーズ", ""]);
	this.selectedItems = ko.observableArray(["オリーブオイル"]);

	this.addItem = function() {
		if ((this.itemToAdd() != "") && (this.allItems.indexOf(this.itemToAdd()) < 0))
			this.allItems.push(this.itemToAdd());
		this.itemToAdd("");
	};

	this.removeSelected = function() {
		this.allItems.removeAll(this.selectedItems());
		this.selectedItems([]); // 選択状態をクリア
	};

	this.sortItems = function() {
		this.allItems.sort();
	};
};

ko.applyBindings(new BetterListModel());