Bootstrap scrollspy và backbone định tuyến

Question

Làm thế nào tôi sẽ đi về bằng cách sử dụng Scrollsty của Bootstrap khi tôi đang sử dụng định tuyến dựa trên băm Backbone.js?

Backbone dụ router, mà tạo ra trang 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 dụ cần thêm # neo có giá trị đến cuối 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> 

Điều này muốn biến URL thành một cái gì đó như www.example.com/#somePage/123#step1, không hoạt động.

Answer 1

Đây là một giải pháp khả thi bằng cách sử dụng Bootstrap bản demo Scrollspy: https://jsfiddle.net/8wvdpddq/

Giả sử bạn muốn có URL cập nhật và một điểm lịch sử bổ sung khi người dùng cuộn, đoạn code sau nên đạt được điều đó:

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

Trong trường hợp này, trigger cũng được đặt, có nghĩa là trình xử lý định tuyến của bạn sẽ kích hoạt, nếu bạn không muốn điều này, chỉ cần xóa tùy chọn này.