ページング機能付きの表

バインディングは text や visible, click などが全てではありません。 実は簡単に独自のバインディングを追加することができます。 単にイベントハンドラを追加したり、DOM エレメントのプロパティを更新したりするようなバインディングであれば、 数行で実装することができます。

しかしそれだけではありません。このページで紹介する simpleGrid のような、 再利用できる部品やプラグインをカスタムバインディングで作成することができます。

プラグインが独自の標準 ViewModel クラスを提供している場合 (このサンプルでは ko.simpleGrid.viewModel)、 ViewModel クラスは主に2つの役割を持ちます。 1つめは、プラグインのインスタンスがどのように動作すべきかを設定する役割 (このサンプルではページサイズと列定義) です。 2つめは、ViewModel のプロパティが Observable である場合は、 外部からそのプロパティを変更することで UI を更新させる役割 (このサンプルでは現在のページ番号) です。例えば、「最初のページへ移動」ボタンの処理を見て下さい。

HTML コードを見て下さい。simpleGrid の使い方はとても簡単です。

デモ

コード: View

<div data-bind='simpleGrid: gridViewModel'> </div>

<button data-bind='click: addItem'>
	追加
</button>

<button data-bind='click: sortByName'>
	名前でソート
</button>

<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
	最初のページへ移動
</button> 

コード: ViewModel

var initialData = [
    { name: "子猫の旅路", sales: 352, price: 75.95 },
    { name: "すばやいコヨーテ", sales: 89, price: 190.00 },
    { name: "トカゲ激昂", sales: 152, price: 25.00 },
    { name: "無関心モンキー", sales: 1, price: 99.95 },
    { name: "ドラゴンの憂鬱", sales: 0, price: 6350 },
    { name: "ヤバいオタマジャクシ", sales: 39450, price: 0.35 },
    { name: "楽観的なカタツムリ", sales: 420, price: 1.50 }
];
 
var PagedGridModel = function(items) {
    this.items = ko.observableArray(items);
 
    this.addItem = function() {
        this.items.push({ name: "新書", sales: 0, price: 100 });
    };
 
    this.sortByName = function() {
        this.items.sort(function(a, b) {
            return a.name < b.name ? -1 : 1;
        });
    };
 
    this.jumpToFirstPage = function() {
        this.gridViewModel.currentPageIndex(0);
    };
 
    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "タイトル", rowText: "name" },
            { headerText: "販売実績(冊)", rowText: "sales" },
            { headerText: "価格", rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],
        pageSize: 4
    });
};
 
ko.applyBindings(new PagedGridModel(initialData));