6

在 Dart 的标准库中是否有任何工具可以帮助处理状态和后退按钮？或者我是否需要模拟 Javascript 解决方案来实现通过 Web 应用程序状态的导航？

我打算将此应用于个人项目，因此浏览器兼容性不是问题（即仅 HTML5 的解决方案就可以了）。

非常感谢。

4

2 回答 2

5

HTML5 定义了用于操作历史的新 API，让您无需重新加载窗口即可更改位置。有一篇关于 Dive Into HTML5 的精彩文章展示了如何使用 history API 在单页应用程序中模拟多页导航。它很容易翻译成 Dart。

这是文章： http ://diveintohtml5.info/history.html

这是历史的 Dart 文档：http: //api.dartlang.org/docs/continuous/dart_html/History.html

在带有导航的单页应用程序中，我通常设置客户端代码的方式类似于在服务器上设置 RoR 或 Django 应用程序或 Dart http 服务器的方式：

  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 回答