このトピックは、Knockout ライブラリ により管理される ビューモデル のオブジェクトをバインドするために igGrid™ コントロールを構成する方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要なトピックと外部リソースの一覧です。
igGrid コントロールの概要を提供し、HTML ページへの追加方法をコードを説明します。igGrid の内部機能および igDataSource™ コンポーネントとどのように対話して各種データ ソースへのバインディングを可能にしているかを説明します。このトピックは、以下のセクションで構成されます。
igGrid コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して、グリッド コントロールのインスタンスを作成し構成するための簡単な方法を提供することを目的としています。
Knockout のサポートは、Knockout バインディングがページに適用されるときに最初に呼び出されるKnockout 拡張機能として、ページの存続期間中 (ビューモデルへの外部更新が発生した場合) に実装されます。
Knockout 管理データ構造にバインドされる igGrid のインスタンスを作成するには、igGrid 構成オプションを table 要素の data-bind 属性に指定する必要があります。これにより、JavaScript を使用してコントロールを作成する場合と同様に、指定された要素の位置にグリッドが描画されます。このオプションを構成する方法の詳細は、以下の Knockout を使用した igGrid の構成のセクションを参照してください。また、data-bind 属性を使用して、ビジネス ケースに関連する他の igGrid オプションのいずれかを指定することもできます。
igGrid コントロールの Knockout 機能拡張を使用すると、行の編集、追加、削除により igGrid データが変更されるたびに、機能拡張は監視可能に通知して、対応するすべてのビューを更新します。また、いくつかの外部ビューが更新されると、拡張機能の監視可能機能により igGrid データが更新されるようになります。(これは、その他のKnockout 拡張機能から予想されるビヘイビアーです)
さらに、バインドされるデータ ソースの変更に対して igGrid が反応するように、igGrid の Knockout 機能拡張を構成できます。つまり、監視可能として構成されたデータ ソースで、行の追加、削除または更新を行うと、拡張機能は要素の追加および削除を追跡し、それに基づいてグリッドの行を更新できます。詳細は、コード例: Knockout ビューモデル オブジェクトにバインドされるグリッドを参照してください。
以下の表は、これらのタスクを管理する各プロパティに対し Knockout 使用シナリオに関連する igGrid コントロールの構成タスクをマップします。実際の実装コード例を、表の下に示します。
| 構成タスク | 必須ですか？ | 詳細 | プロパティ |
|---|---|---|---|
| ビューモデル オブジェクトのフィールドを、グリッドの列キーにバインド | 必須 |
Knockout を使用してデータにバインドする場合、最小要件は、グリッドの列の key プロパティを構成することです。これにより、グリッドとビューモデルの間でデータを交換できます。
|
|
| グリッドのデータ ソースの指定 | 必須 |
グリッドのデータ ソースを構成するためのプロパティは、dataSource です。
|
|
| ビューモデル オブジェクトの更新 | オプション |
デフォルトでは、グリッドは KnockoutDataSource を介してビューモデルを更新します。更新の実行には、
autoCommit が有効な場合)、または dataDirty イベントが実行されたときに実行する (autoCommit が有効ではない場合) のいずれかを選択できます。
|
以下は、このトピックで使用したコード例を示しています。
igGrid コントロールの基本構成を示します。この手順では、Knockout 監視可能 ビューモデル オブジェクトにバインドされる igGrid コントロールの基本構成を示します。Knockout の宣言構文を使用して、table 要素の data-bind 属性からグリッドのインスタンスを作成し、ビューモデル監視可能プロパティにバインドします。
この手順を実行するには、以下のリソースが必要です。
JavaScript の場合:
<script src="{IG Resources root}/js/extensions/infragistics.datasource.knockoutjs.js"></script>
<script src="{IG Resources root}/js/extensions/infragistics.ui.grid.knockout-extensions.js"></script>
igGrid のバインディング プロパティの宣言igGrid を Knockout 監視可能ビューモデル オブジェクトにバインドするための一般的な手順を簡単に示すと、以下のようになります。
ビューモデル オブジェクトの作成
以下のコードは、Knockout により管理される監視可能プロパティを宣言するビューモデル オブジェクトを示します。
配列構造と各オブジェクト フィールドの両方が監視可能として宣言される点に注意してください。データ項目が追加、削除または変更される場合にビューを更新でき、ユーザーが編集を行う場合にビューモデルを変更できます。
JavaScript の場合:
var itemsModel, db = nwCustomersWithOrders;
var Item = function (ID, ContactName, City, Country) {
var self = this;
this.ID = ko.observable(ID);
this.ContactName = ko.observable(ContactName);
this.City = ko.observable(City);
this.Country = ko.observable(Country);
}
function ItemsViewModel() {
var self = this;
self.data = ko.observableArray([]);
self.selectedItemID = ko.observable(0);
for (var i = 0; i < db.length; i++) {
self.data.push(new Item(db[i].ID, db[i].ContactName, db[i].City, db[i].Country));
}
self.selectionChanged = function (evt, ui) {
var rowdata = ui.row;
var selectedItemInArray =
ko.utils.arrayFirst(self.data(), function (item) {
return item.ID() === rowdata.id;
});
self.selectedItemID(parseInt(rowdata.index));
};
}
itemsModel = new ItemsViewModel();
宣言された Knockout バインディングをページに適用
以下のコード スニペットは、宣言されたKnockout バインディングをページに適用する方法を示します。
ko.applyBindings() 呼び出しは、Infragistics Loader の即時コールバック内で出される点に注意してください。これは、Knockout のグリッド拡張機能は、バインディングが適用される前にページに読み込む必要があるためです。
JavaScript の場合:
$.ig.loader({
scriptPath: "http://{IG Resources root}/ig_ui/js/",
cssPath: "http://{IG Resources root}/ig_ui/css/",
resources: "igGrid.*,extensions/infragistics.datasource.knockoutjs.js,extensions/infragistics.ui.grid.knockout-extensions.js",
ready: function () {
ko.applyBindings(itemsModel);
}
});
ビュー内の igGrid のバインディング プロパティの宣言
以下のコードは、ビュー内に igGrid のバインディング プロパティを宣言する方法を示します。最も重要なのは、対応する table 要素の data-bind 属性におけるインスタンス化プロパティの宣言部分です。
ビューモデル オブジェクトのすべての列の key プロパティと datasource プロパティが監視可能である点に注意してください。key プロパティの場合、ビューモデル オブジェクトは igGrid データを動的に更新でき、逆も同様です。igGrid はビューモデル オブジェクトを更新できるようになります。dataSource を監視可能な配列として構成すると、igGrid は要素の追加と削除を追跡し、それに基づいて行の一覧を更新できるようになります。これらのプロパティのいずれかを監視不可能として宣言できます。これは、対応する機能を失うということです。監視可能として定義されるビューモデル オブジェクトのプロパティがないと、igGrid に対する Knockout サポートはなく、宣言構文および Knockout バインディング拡張機能を使用することは意味をなしません。
HTML の場合:
<table id="grid" data-bind="igGrid: {
dataSource: data,
width: 700,
primaryKey: 'ID',
autoCommit: true,
features: [
{
name: 'Updating',
editMode: 'row',
columnSettings: [
{
columnKey : 'ID',
readOnly : true
}
]
},
{
name: 'Selection',
mode: 'row',
multipleSelection: true,
activation: true,
rowSelectionChanged:itemsModel.selectionChanged
},
{
name: 'Paging',
type: 'local',
pageSize: 5
}
],
autoGenerateColumns: false,
columns: [
{ headerText: 'Customer ID ', key: 'ID', dataType: 'string'},
{ headerText: 'Contact Name', key: 'ContactName', dataType: 'string' },
{ headerText: 'City', key: 'City', dataType: 'string' },
{ headerText: 'Country', key: 'Country', dataType: 'string' }
]
}">
</table>
サンプル
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
Knockout サポートの構成 (igCombo): このトピックは、Knockout ライブラリにより管理されるビューモデル オブジェクトをバインドするために igCombo コントロールを構成する方法について説明します。
Knockout サポート (エディター): このトピックは、Knockout ライブラリにより管理されるビューモデル オブジェクトをバインドするために Ignite UI for jQuery エディター コントロールを構成する方法について説明します。
Knockout サポートの構成 (igTree): このトピックは、Knockout ライブラリにより管理される View-Model オブジェクトをバインドするために igTree コントロールを構成する方法について説明します。
以下に、このトピックに関連する追加情報を示します (Infragistics のコンテンツ ファミリー以外でもご利用いただけます)。
オンラインで表示: GitHub