6

Dartの標準ライブラリの状態と戻るボタンの処理を支援する機能はありますか？または、Webアプリケーションの状態を介したナビゲーションを実装するためにJavascriptソリューションをエミュレートする必要がありますか？

これを個人的なプロジェクトに適用して、ブラウザーの互換性が問題にならないようにするつもりです（つまり、HTML5のみのソリューションで十分です）。

どうもありがとう。

4

2 に答える 2

5

HTML5は、履歴を操作するための新しいAPIを定義し、ウィンドウをリロードせずに場所を変更できるようにします。Dive Into HTML5に関するすばらしい記事があり、履歴APIを使用して単一ページのアプリで複数ページのナビゲーションをエミュレートする方法を示しています。ダートに簡単に翻訳できます。

記事は次のとおりです：http： //diveintohtml5.info/history.html

そして、これがHistoryのDartドキュメントです：http： //api.dartlang.org/docs/continuous/dart_html/History.html

ナビゲーション付きのシングルページアプリでは、クライアント側のコードを一般的に設定する方法は、RoRまたはDjangoアプリ、さらに言えばDarthttpサーバーをサーバーに設定する方法と似ています。

  1. ウィンドウの場所に対して機能するマッチャーのセットを定義します
  2. マッチャーを仮想ページまたはその他の場所を表示する関数にマップします

次に、それをシームレスなエクスペリエンスにするために：

  1. すべてのアンカーにブックマーク用のhrefを付けますが、onclickハンドラーを追加して履歴状態をプッシュする関数を呼び出し、preventDefaultを追加してリロードを防ぎます。
  2. 最初のページの読み込み時に、URLを読み取り、（2）のマップに送信します。

サンプル：

main() {
  // handle the back button
  window.on.popState.add((_) => showPage());
}

showPage() {
  String path = window.location.pathname;
  if (path == '/') {
    showFrontPage();
  } else if (DETAIL_PAGE_URL.hasMatch(path)) {
    String id = DETAIL_PAGE_URL.firstMatch(path).group(1);
    showDetailPage(i);
  }
}

showFrontPage() {
  //... code to build a link to a detail page
  detailAnchor.on.click.add((MouseEvent e) {
    window.history.pushState(null, detail.title, detail.url);
    e.preventDefault();
    showDetailPage(detail);
  }, false);
}
于 2012-08-24T19:50:58.520 に答える
1

javascriptのように、URLでハッシュアンカーを簡単に取得できます。

var hash = window.location.hash;

ハッシュとあなた次第のアクションの間の関連付け。

于 2012-08-23T22:57:03.460 に答える