Bootstrap Scrollspy和backbone routing

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

骨干路由器例如，创建页面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例子应该＃锚值追加到结尾的网址：

<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#step1这样的网址，该网址无效。

来源

2012-12-04 abritez

这个职位回答了我的问题http://stackoverflow.com/questions/11672687/anchors-in-links – abritez

下面是使用引导演示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也被设置，这意味着你的路由处理程序将触发，如果你不想要这个，只需删除这个选项。

来源

2016-10-25 13:54:20 mikeapr4

Bootstrap Scrollspy和backbone routing

回答

相关问题