シンプルなリスト

配列をバインドするサンプルです。

テキストを入力しないと「追加」ボタンがクリックできないようになっています。
HTML コードで enable バインディングの使い方を確認して下さい。

デモ

コード: View

<form data-bind="submit: addItem">
    新しいアイテム
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">追加</button>
    <p>アイテム一覧</p>
    <select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>

コード: ViewModel

var SimpleListModel = function(items) {
	this.items = ko.observableArray(items);
	this.itemToAdd = ko.observable("");
	this.addItem = function() {
		if (this.itemToAdd() != "") {
			// アイテムを追加します。
			// 追加先の items は observableArray なので、対応する UI が更新されます。
			this.items.push(this.itemToAdd());
			// itemToAdd は Observable であり、テキストボックスにバインドされているため、
			// 次のようにすることでテキストボックスをクリアできます。
			this.itemToAdd("");
		}
	}.bind(this);  // this が常にこの ViewModel を指すようにします
};

ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));