バージョン

igDataSource を REST サービスへバインド

概要

このドキュメントでは、Ignite UI for jQuery™ データ ソースや igDataSource のコントロールに REST サービスをバインドする方法を紹介します。データ ソース コントロールの本当の柔軟性を示すために、含まれているサンプルは Ignite UI for jQuery のグリッドまたは igGrid コントロールを使用せずにデータを描画します。あるいは、データ ソースから直接手動で描画を処理する方法を学ぶこともできます。

注: 手動による描画の手法を使用するということは、igDataSource を使って独自のデータ バインドされたコントロールをビルドすることを意味します。

最初に、株式情報レポート アプリケーションを構築する方法を考えてみましょう。まず、Stock Quote サービスに接続する必要があります。これはアプリケーション内で次の URL でホストされているとします。

/Services/StockQuoteService.svc/GetStockQuoteGET?symbol=MSFT

このサービスは、MSFT シンボルで問い合わせをすると、リスト 1 のような XML 応答を返すでしょう。

リスト 1: サービス応答の例

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 を与える必要があります。

リスト 2: データ ソースの REST サービスへの接続

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 クライアント テンプレートを使用してデータをユーザーに描画する実装関数を割り当てる方法を示しています。

リスト 3: データ ソース コントロールで使用するコールバック関数

JavaScript の場合:

var render = function (success, error) {
   if (success) {
      $("#quoteContainer").empty();
      $("#quoteTemplate").tmpl(ds.dataView()).appendTo("#quoteContainer");
   } else {
      alert(error);
   }
};

注: コールバック関数は、データ ソースの初期化に提供する前に宣言しなければなりません。

コールバック関数を呼び出すと、dataView が jQuery Template に描画されます。

関連トピック

オンラインで表示: GitHub