Routing przewijania Bootstrap i kręgosłupa

Question

W jaki sposób chciałbym użyć Scrollspy Bootstrapa, gdy używam routingu opartego na hashu Backbone.js?

Backbone Router przykładem, który tworzy stronę www.example.com/#somePage/123

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 przykład, który powinien dołączyć # Anchor-wartość do końca URL:

<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> 

To chce zmienić adres URL na np. Www.example.com/#somePage/123#step1, który nie działa.

Answer 1

Oto możliwe rozwiązanie używając Bootstrap demo Scrollspy: https://jsfiddle.net/8wvdpddq/

Zakładając, że chcą mieć URL zaktualizowaną i punkt Historia dodany jako użytkownik przewija się następujący kod powinien go osiągnąć:

$('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); 
}) 

W tym przypadku ustawiono również trigger, co oznacza, że ​​procedury obsługi routingu zostaną uruchomione, jeśli tego nie chcesz, po prostu usuń tę opcję.