Bootstrap scrollspy和骨干路由

Question

当我使用Backbone.js基于哈希的路由时,我将如何使用Bootstrap的Scrollspy？

Backbone路由器示例,它创建页面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示例,它应该将#anchor-value附加到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>

这需要将URL转换为www.example.com/#somePage/123#step1,这是行不通的.

Answer 1

这是使用 Bootstrap 演示 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);
})

在这种情况下，trigger也设置了，这意味着您的路由处理程序将触发，如果您不希望这样做，只需删除此选项即可。