Nazwana kotwica w aplikacji z pojedynczą stroną (SPA)

Question

W SPA, korzystając z architektury nawigacyjnej, takiej jak Sammy.js, w jaki sposób mogę użyć w anchorach o nazwie strony do nawigacji na stronie?

np. Że mam trasą jak localhost/myapp/#/somerecord/1 gdzie ładowania aplikacji somerecord z id = 1.

Jednak somerecord jest bardzo skomplikowana i długa. Chcę móc przeskoczyć do pewnej sekcji używając nazwanej kotwicy.

Powiedz, że element artykułu jest zdefiniowany jako <article id=section-d> ... </article>, a ja po prostu linkuję do niego jak <a href=#section-d>Section D</a> to technicznie działa, ale adres URL brzmi jak localhost/myapp/#section-d, to zepsuje stos nawigacyjny. Naciśnięcie przycisku Wstecz przenosi mnie z powrotem na numer localhost/myapp/#/somerecord/1 i bez przechodzenia na numer.

Preferowanym działaniem byłoby albo przejście z powrotem na górę lub na poprzednią stronę. Wszelkie pomysły, jak to osiągnąć?

Answer 1

Miałem ten sam problem przy użyciu durandal z sammy.js. Zasadniczo, musisz stworzyć (niewidoczną) trasę dla każdej kotwicy, którą chcesz na swojej stronie. Zobacz ode mnie informację o znalezionym rozwiązaniu: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

Answer 2

Skutecznie, musisz zdefiniować swój adres URL jako wyrażenie regularne i zezwolić na opcjonalne hashowanie zakładki na końcu; coś takiego:

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

ta powinna odpowiadać jednej z następujących trasach:

• #/somerecord/1
• #/somerecord/1 # (traktowany tak, jakby nie ma artykuł id)
• #/somerecord/1 # sekcja-d (articleID = '# sekcja-d')

następnie powinno być w stanie korzystać z articleID znaleźć pasujący ele i przewijanie ręczne. na przykład w ostatniej trasie powyżej, przy użyciu jQuery można zrobić coś takiego:

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

Właśnie pisemnej się bardziej kompleksowe artykuł na ten temat (używając Durandal), jeśli jesteś zainteresowany: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/

Edytuj Link jest martwy. Artykuł dostępny tutaj http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/