バージョン 24.2 (最新)

History.js と Ignite UI for jQuery コントロールの統合

トピックの概要

目的

Ignite UI for jQuery コントロールはブラウザーの履歴機能を提供する history.js をサポートします。このトピックは、統合に必要な要件の説明および gGrid コントロールを history.js に統合する方法について示します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。

このトピックの内容

このトピックは、以下のセクションで構成されます。

History.js 概要

HTML5 には履歴/状態 API がありブラウザー履歴を操作できます。すべてのページ操作が非同期で発生するシングル ページ アプリケーションの使用が多くなると、動的なページがある場合にページ URL を合わせて変更する必要があります。これもまた各ページ セクションへの一意のエントリ ポイントを持つために必要になります。HTML5 History/State API は、ページ ステートを保存して対応する URL をそれぞれに作成できます。次のページや前のページに移動する際にページのステートを復元します。 この機能が完全にサポートされていないブラウザーもありますが、History.js フレームワークがブラウザーで発生する問題をポリフィルします。

ブラウザー履歴 API を使用する場合、現在のページは 3 つのパラメーターで定義されます。

  • state - 現在のページ情報を保持するオブジェクト。
  • title - 現在のページのタイトル。
  • url - そのステートの現在のページと関連付けされるエントリ ポイント。

現在のページのステートを定義して上記パラメーターを使用した場合、ページを履歴スタックに追加し、そこから置き換えまたは復元が可能となりブラウザー履歴を移動する際に使用できます。

Ignite UI for jQuery コントロールは 完全に history.js と統合できます。Ignite UI for jQuery コントロールのステートを保存する場合、後者のクライアント側イベント API を使用します。これらのイベントは Ignite UI for jQuery コントロールの現在のステートを持ちます。使用できるステートはブラウザー履歴スタックにプッシュします。以下に igGrid を HistotyJS フレームワークと統合する方法の詳細を示します。

以下は、IgniteUI の機能を有効にするために必要なブラウザー履歴と History.js API メソッドです。トピックではブラウザーの全履歴 API と History.js フレームワークについての詳細な情報を示します。

  • pushState() - 履歴スタックにエントリを追加します。
window.History.pushState(state, title, url);
  • getState() - 履歴スタックに現在のエントリを取得します。
window.History.getState();
  • replaceState() - 履歴スタックにエントリを更新します。
window.History.replaceState(currState.data);
  • statechange - History.js イベントがブラウザー履歴の表示を移動する際に発生します。
window.History.Adapter.bind(window, 'statechange', function (e, args) { }

igGrid と History.js の統合

このセクションでは igGrid コントロールを使用して IgniteUI を History.js フレームワークに統合する方法について説明します。サンプルでは、ページング、フィルタリング、並べ替え、サイズ変更などのグリッド機能が使用されます。各機能に正しく保存するために必要なステートを定義します。ステートを保存し、グリッドを正しく復元するために statechange history イベントがいつ発生するかを確かにします。

ステート オブジェクトは、必要なポイントで復元するために必要なすべての情報を含み、説明するための URL と関連付けされます。 ブラウザー履歴にページング ステートを追加します。同じ機能を並べ替え機能に追加した場合の違いを確認します。

pageIndexChanged: function (e, args) {
    var pageIndex = args.pageIndex + 1, // pageIndex starts from 0
        state = { key: "page", value: pageIndex };
    window.History.pushState(state, null, formURL("page", pageIndex));
}

ステートには機能名と pageIndex が使用されます。以上がページング ステートとその復元に必要となる手順のすべてです。 注: 以下のサンプル コードで formURL() メソッドが適切な URL を作成する方法を確認できます。この場合ページングで文字列 "?page=2" を作成し、それを現在のページ ステートと関連付けします。他の機能ではより複雑な手順となります。

ステートは statechange イベント ハンドラー内で復元できます。

window.History.Adapter.bind(window, 'statechange', function (e, args) {
    currState = window.History.getState().data;
    gridHistoryJS.igGridPaging("pageIndex", currState.value - 1);
}

常に選択したページがあり、ページング ステート pageIndex() を変更するメソッドが 1 つのみのページングなどの機能には十分です。 上記の方法は並べ替えなどの機能には使用できません。これは並べ替えに複数の並べ替え列があり、ステートが保存および別々に復元する必要があるとともに、復元時には列を並べ替えする代わりに並べ替えを解除する必要がある場合があり、2 つの API メソッドが必要となるためです。次の例で詳細を示します。以下の場合を想定します。

  1. グリッドが並べ替えされていません。
  2. 最初のページから 2 ページ目へページングを変更します。
  3. 列を昇順に並べ替えます。
  4. 同じ列を降順に並べ替えます。
  5. ブラウザー履歴に戻ります。
  6. ブラウザー履歴に再度戻ります。

最初に戻るが押されたとき、最後の並べ替え列のステートを降順から昇順へ変更する必要があります。並べ替えステートを前に追加した場合、ページングと同じ方法になります。

columnSorted: function (e, args) {
    var columnKey = args.columnKey,
        dir = args.direction,
        state = { key: "sort", value: [columnKey, dir] };
    if (!isEmptyValue(columnKey) && !isEmptyValue(dir)) {
        window.History.pushState(state, null, formURL("sort", [columnKey, dir]));
    }
}

その場合以下のコードで最後の列並べ替えステートを正しく復元できます。

window.History.Adapter.bind(window, 'statechange', function (e, args) {
    var currState = window.History.getState().data,
        column = currState.value.columnKey,
        status = currState.value.dir;

        gridHistoryJS.igGridSorting("sortColumn", column, status);

}

ただし戻るボタンが 2 回目に押された場合、ステート 3 から 2 になるため、前回の列並べ替えを解除する必要があり、上記コードは使用できません。この場合、以下のコードが必要になります。

window.History.Adapter.bind(window, 'statechange', function (e, args) {
    var currState = window.History.getState().data,
        column = currState.value.columnKey;

        gridHistoryJS.igGridSorting("unsortColumn", column);

}

ここでの問題は、履歴に戻る際にどちらのメソッドが必要であるかをどのように識別するかです。それには現在の履歴ステートの追加情報が必要になります。新しいステートを並べ替え列に追加する前に (3.)、以前のページングステートを変更して元に戻すステーを並べ替え列に追加します。この方法は、前のページング ステートを復元するだけでなく、現在の並べ替えされている列の元に戻すおよび並べ替え解除で使用できます。

各機能のステートには履歴スタックに追加する前に元に戻すステートを追加します。これは古いステート情報を持つ IgniteUI コントロールの -ing イベントで可能です。並べ替えは columnSorting イベントです。

columnSorting: function (e, args) {
    var currState = window.History.getState(), data;

            data = { key: "sort", value: [args.columnKey] };
            data.undo = true;
            currState.data.undoData = data;
            window.History.replaceState(currState.data);
}

前のステートを取得し、情報を追加または元に戻します。次に履歴スタックでそれを置き換えます。 上記コードは data と同様の undoData オブジェクトを定義し、ステートを元に戻す必要があることを示すフラグがあります。

window.History.Adapter.bind(window, 'statechange', function (e, args) {
    var currState = window.History.getState().data,
        column = currState.value.columnKey,
        status = currState.value.dir,
        undoColumn = currState.undoData.value.columnKey;

        if (currState.undoData.undo) {
            gridHistoryJS.igGridSorting("unsortColumn", undoColumn);
        } else {
            gridHistoryJS.igGridSorting("sortColumn", column, status);
        }

}

サンプル

このサンプルでは、igGrid コントロールを history.js と統合する方法を紹介します。フットボール プレーヤーのリストをフィルター、並べ替え、サイズ変更またはグリッドページを変更し、新しいビューを作成し、生成されたブラウザー URL を使用してリストを送信します。 加えてサンプルにはグリッドが初期描画されるときに並べ替えを適用するコードがあります。他のグリッド機能で保存、置き換え、復元する方法、および 他のグリッド機能ステートに URL を構成する方法を示します。

HistoryJS

関連コンテンツ

トピック

このトピックに関連する追加情報については、以下のトピックを参照してください。

オンラインで表示: GitHub