6

在 SPA 中，使用诸如 Sammy.js 之类的导航框架，我如何在名为锚点的页面中使用页面内导航？

例如，假设我有一条路线localhost/myapp/#/somerecord/1，例如应用程序加载一些id = 1 的记录。

然而somerecord真的很复杂而且很长。我希望能够使用命名锚点跳转到某个部分。

假设文章元素定义为 like<article id=section-d> ... </article>并且我只是链接到喜欢<a href=#section-d>Section D</a>它在技术上有效，但 URL 读取为localhost/myapp/#section-d，这会破坏导航堆栈。点击后退按钮让我回到顶部，localhost/myapp/#/somerecord/1而不是跳回顶部。

首选操作是跳回顶部或上一页。关于如何做到这一点的任何想法？

4

2 回答 2

3

实际上，您必须将您的 URL 定义为正则表达式，并在其末尾允许可选的书签哈希；就像是：

get(/#\/somerecord\/(\d+)(#.+)?/, function() {
    var args = this.params['splat'];
    var recordId = args[0];
    var articleId = args[1];
});

这应该匹配以下任何路线：

  • #/somerecord/1
  • #/somerecord/1#（当作没有文章id处理）
  • #/somerecord/1#section-d (articleId = '#section-d')

然后，您应该能够使用 articleId 找到匹配的元素并手动滚动。例如，在上面的最后一条路线中，使用 jQuery 您可以执行以下操作：

var $article = $(articleId);
    $(document.body).animate({ scrollTop: $article.offset().top });
});

如果您有兴趣，我刚刚写了一篇关于此的更全面的文章（使用 Durandal）：http: //quickduck.com/blog/2013/04/23/anchor-navigation-durandal/

编辑 链接已死。此处提供的文章http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/

于 2013-04-23T07:27:21.397 回答
1

我在使用 durandal 和 sammy.js 时遇到了同样的问题。基本上，您必须为页面上所需的每个锚点创建一个（不可见的）路由。请参阅我关于我找到的解决方案的帖子：http: //papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

于 2013-04-21T09:25:05.777 回答