Именованный якорь в одностраничном приложении (SPA)

Question

В SPA, используя инфраструктуру навигации, такую ​​как Sammy.js, как я могу использовать на странице с именем anchors для навигации по страницам?

например. Скажем, у меня есть маршрут, как localhost/myapp/#/somerecord/1 где приложение загружает somerecord с идентификатором = 1.

Однако somerecord действительно сложный и длительный. Я хочу иметь возможность перейти к определенному разделу с помощью именованного якоря.

Say статья элемент определяется как <article id=section-d> ... </article> и я просто ссылка нравится <a href=#section-d>Section D</a> технически это работает, но URL читается как localhost/myapp/#section-d, это нарушает навигационный стек. Нажатие кнопки «Назад» возвращает меня к localhost/myapp/#/somerecord/1 и без прыгает назад.

Предпочтительным действием является переход на верхнюю или предыдущую страницу. Любые идеи о том, как это сделать?

Answer 1

У меня была такая же проблема с использованием durandal с sammy.js. В принципе, вам нужно создать (невидимый) маршрут для каждого якоря, который вы хотите на своей странице. Посмотрите сообщение от меня о найденном решении: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

Answer 2

Фактически, вы должны определить свой 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 # раздел-д (ArticleID = '# раздел-д')

затем вы должны иметь возможность использовать ArticleID, чтобы найти соответствующее Ele и ручную прокрутку. например в последнем маршруте выше, с помощью JQuery вы могли бы сделать что-то вроде:

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

Я только что написал на более всеобъемлющую статью об этом (с использованием Дюрандаль), если вы заинтересованы: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/

Редактировать Ссылка мертва. Статья доступна здесь http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/