シングルページアプリケーション（SPA）の名前付きアンカー

Question

SPAでは、Sammy.jsなどのナビゲーションフレームワークを使用して、ページ内ナビゲーション用のページアンカーでどのように使用できますか？

しかし、私はlocalhost/myapp/#/somerecord/1どこアプリケーションがロードID = 1

とsomerecordのようなルートを持っていると言うsomerecordは本当に複雑で長いです。名前付きアンカーを使用して特定のセクションにジャンプできます。

は、物品の要素は、それが技術的に働く<article id=section-d> ... </article>のように定義されたと私はちょうど<a href=#section-d>Section D</a>を好きにリンクしていると言うが、URLが、これはナビゲーションスタックを壊し、localhost/myapp/#section-dのように読み取ります。戻るボタンを押すとlocalhost/myapp/#/somerecord/1とに戻り、が先頭に戻ります。

推奨アクションは、先頭ページまたは前のページにジャンプすることです。どのようにこれを達成するための任意のアイデア？

Answer 1

私はsammy.jsでdurandalを使用して同じ問題を抱えていました。基本的には、あなたのページに必要なアンカーごとに（目に見えない）ルートを作成する必要があります。私が見つけた解決策についての私の記事を参照してください。http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

Answer 2

効果的に、URLを正規表現として定義し、最後にオプションのブックマークハッシュを許可する必要があります。以下のようなもの：

• ＃/ somerecord/1
• ＃/ somerecord/1＃（なし物品IDが存在しないかのように扱わ）
：

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

これは、以下の経路のいずれかと一致する必要があります

• ＃/ somerecord/1＃部-D（情報でarticleID = '＃部-D'）

その後マッチングELEを見つけるために情報でarticleIDを使用することができるはず

手動でスクロールしてください。例えば上記の最後のルートでは、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/