このドキュメントでは、Ignite UI for jQuery™ データ ソースや igDataSource
のコントロールに REST サービスをバインドする方法を紹介します。データ ソース コントロールの本当の柔軟性を示すために、含まれているサンプルは Ignite UI for jQuery のグリッドまたは igGrid
コントロールを使用せずにデータを描画します。あるいは、データ ソースから直接手動で描画を処理する方法を学ぶこともできます。
注: 手動による描画の手法を使用するということは、
igDataSource
を使って独自のデータ バインドされたコントロールをビルドすることを意味します。
最初に、株式情報レポート アプリケーションを構築する方法を考えてみましょう。まず、Stock Quote サービスに接続する必要があります。これはアプリケーション内で次の URL でホストされているとします。
/Services/StockQuoteService.svc/GetStockQuoteGET?symbol=MSFT
このサービスは、MSFT シンボルで問い合わせをすると、リスト 1 のような XML 応答を返すでしょう。
XML の場合:
<StockQuotes>
<Stock>
<Symbol>MSFT</Symbol>
<Last>25.32</Last>
<Date>5/12/2011</Date>
<Time>4:00pm</Time>
<Change>0.00</Change>
<Open>N/A</Open>
<High>N/A</High>
<Low>N/A</Low>
<Volume>41755</Volume>
<MktCap>213.5B</MktCap>
<PreviousClose>25.32</PreviousClose>
<PercentageChange>0.00%</PercentageChange>
<AnnRange>22.73 - 29.73</AnnRange>
<Earns>2.517</Earns>
<P-E>10.06</P-E>
<Name>Microsoft Corpora</Name>
</Stock>
</StockQuotes>
サービスと通信するためのデータ ソースを構成するには、リスト 2 に示すように、データ ソース コントロールにデータ スキーマとサービスの URL を与える必要があります。
JavaScript の場合:
var url = "/SamplesBrowser/Services/StockQuoteService.svc/GetStockQuoteGET?symbol=MSFT";
var quoteSchema = new $.ig.DataSchema("xml", { fields: [
{ name: "Name", xpath: "Name" },
{ name: "Symbol", xpath: "Symbol" },
{ name: "Last", xpath: "Last" },
{ name: "Date", xpath: "Date" },
{ name: "Time", xpath: "Time" },
{ name: "Change", xpath: "Change" },
{ name: "Open", xpath: "Open" },
{ name: "High", xpath: "High" },
{ name: "Low", xpath: "Low" },
{ name: "Volume", xpath: "Volume" },
{ name: "MktCap", xpath: "MktCap" },
{ name: "PreviousClose", xpath: "PreviousClose" },
{ name: "PercentageChange", xpath: "PercentageChange" },
{ name: "AnnRange", xpath: "AnnRange" },
{ name: "Earns", xpath: "Earns" },
{ name: "PE", xpath: "P-E"}],
searchField: "//StockQuotes/Stock"
});
ds = new $.ig.DataSource({ callback: render, dataSource: url, schema: quoteSchema }).dataBind();
応答データのどの部分がデータ ソースにバインドされているかを指定するために、スキーマの定義が必要です。
注: サービスが JSON データを返すだけの場合、スキーマのうち必要な部分は、各フィールドの「name」プロパティのみです。つまり、「xpath」プロパティのみが XML データに必要です。
注: データ スキーマは、JSON の結果に暗示されており、XML データでのみ必要です。さらに、サービスが XML を返すことを指定する必要もありません。データ ソースは自動的にこれを検出します。
データ ソースでデータが処理されると、そのデータをユーザーに対して描画する準備が整います。描画を実現するには、コールバック ポインターを dataSource
初期化コードに与えます。サービスへのバインドはリモート バインドなので、dataBind()
メソッドを呼び出したとき、応答はすぐには使用可能になりません。そのため、応答が使用可能になり解析されるときに必ずデータ ソースによって実行されるコールバック関数をコントロールがポイントします。リスト 3 は、jQuery クライアント テンプレートを使用してデータをユーザーに描画する実装関数を割り当てる方法を示しています。
JavaScript の場合:
var render = function (success, error) {
if (success) {
$("#quoteContainer").empty();
$("#quoteTemplate").tmpl(ds.dataView()).appendTo("#quoteContainer");
} else {
alert(error);
}
};
注: コールバック関数は、データ ソースの初期化に提供する前に宣言しなければなりません。
コールバック関数を呼び出すと、dataView
が jQuery Template に描画されます。
オンラインで表示: GitHub