ブートストラップスクロールとバックボーンのルーティング

Question

Backbone.jsハッシュベースのルーティングを使用しているとき、私はどのようにBootstrapのScrollspyを使用しますか？

<div id="navbar" class="row-fluid"> 
     <ul class="nav nav-pills navbar"> 
      <li class="active"> 
       <a href="#step1">1</a> 
      </li> 
      <li> 
       <a href="#step2">2</a> 
      </li> 
     </ul> 
    </div> 
    <div data-spy="scroll" data-target=".navbar"> 
     <h4 id="step1">Step 1</h4> 
     <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> 
     <h4 id="step2">Step 2</h4> 
     <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p> 
    </div> 

：www.example.com/#somePage/123最後にURLを＃アンカー値を追加する必要があります

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "": "home", 
     "somePage/:id": "somePage" 
    }, 
    somePage: function (id) { 
     console.log("do something"); 
    } 
}); 

$(document).ready(function(){ 
    window.app = new AppRouter(); 
    Backbone.history.start(); 
});  

TwitterのscrollSpy例ページを作成します

バックボーンルータの例、

これは、www.example.com/#somePage/123#step1のようなものにURLを変換しようとしていますが、動作しません。ここで

Answer 1

は、ブートストラップデモScrollspyを使用して可能な解決策である：https://jsfiddle.net/8wvdpddq/

は、あなたがURLに更新され、ユーザーがスクロールとして追加履歴ポイントを持っているしたいと仮定すると、次のコードは、それを達成する必要があります

$('body').on('activate.bs.scrollspy', function() { 
    var active = $('nav li:not(.dropdown).active a').attr('href').slice(1); 
    window.app.navigate(active, {trigger: true}); 
    console.log('update url/history to ' + active); 
}) 

この場合、も設定されます。これは、ルーティングハンドラが起動することを意味します。必要がない場合は、このオプションを削除してください。