ig.KnockoutDataSource
KnockoutDataSource は DataSource クラスを拡張しており、Ignite UI コントロールとプレーンな DOM 要素の両方に対する Knockout.js サポートを追加するクライアント側のコンポーネントです。KnockoutDataSource によって、行を追加、更新、削除するためにバインディングを作成することにより、ページのモデルとビューを同期することが可能となります。また、データ バインディング (データの読み取り) は完全に透過的です。つまり、監視可能な配列をデータ ストアとして使用でき、余分なコードを必要とせずに knockout.js とシームレスに動作します。行の配列と個々のセルは両方とも監視可能なオブジェクトとして設定できます。このデータソース機能は、フィルター、ページング、並べ替え、列の集計およびデータの更新をサポートします。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。
コード サンプル
<!doctype html><html><head> <!-- jQuery Core --> <script src="js/jquery.js" type="text/javascript"></script> <!-- jQuery UI --> <script src="js/jquery-ui.js" type="text/javascript"></script> <!-- Infragistics Loader Script --> <script src="js/infragistics.loader.js" type="text/javascript"></script> <script src="js/adventureWorks.min.js" type="text/javascript"></script> <!-- Infragistics Loader Initialization --> <script type="text/javascript"> var itemsModel, db = [{"Name": "Bread","Rating": 4,"Price": "2.5"}, {"Name": "Milk", "Rating": 3, "Price": "3.5"}, {"Name": "Vint soda", "Rating": 3, "Price": "20.9"}]; function Item(name, price, rating) { return { name: ko.observable(name), price: ko.observable(price), rating: ko.observable(rating) }; }; function ItemsViewModel() { var self = this; self.data = ko.observableArray([ ]); for (var i = 0; i < 3; i++) { self.data.push(new Item(db[i].Name, db[i].Price, db[i].Rating)); } } var ds, render = function (success, error) { if (success) { ds.addRow(4, {name : "CD Player", price : "40", rating : 4}, true); $($.ig.tmpl("<tr><td>Name: ${name}</td><td>Price: ${price}</td><td>Rating: ${rating}</td></tr>", ds.dataView())).appendTo("#table1"); } else { alert(error); } } $.ig.loader(function () { var model = new ItemsViewModel(); ko.applyBindings(model); ds = new $.ig.KnockoutDataSource({ callback: render, dataSource: model, type: 'json', responseDataKey: 'data' }); ds.dataBind(); }); </script> </head><body> <table id="table1"></table></body></html> |
依存関係
jquery-1.9.1.js
ig.util.js
ig.datasource.js