引导滚动和主干路由 [英] Bootstrap scrollspy and backbone routing

问题描述

当我使用基于Backbone.js哈希的路由时，如何使用Bootstrap的Scrollspy?

How would i go about using Bootstrap's Scrollspy when I am using Backbone.js hash based routing?

骨干路由器示例，该示例创建页面www.example.com/#somePage/123

Backbone router example, which creates page 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:

Twitter scrollSpy example which should append #anchor-value to the end the 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之类的东西，该URL无法正常工作.

This wants to turn the URL to something like www.example.com/#somePage/123#step1, which is not working.

推荐答案

以下是使用Bootstrap演示Scrollspy的可能解决方案: https://jsfiddle.net/8wvdpddq/

Here is a possible solution using the Bootstrap demo Scrollspy: https://jsfiddle.net/8wvdpddq/

假设您希望更新URL并在用户滚动时添加历史记录点，则以下代码应该可以实现:

Assuming you wish to have the URL updated and a history point added as the user scrolls, the following code should achieve it:

$('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，这意味着您的路由处理程序将触发，如果您不希望这样做，则只需删除此选项即可.

In this case, trigger is also set, meaning your routing handlers will fire, if you don't want this, just remove this option.

这篇关于引导滚动和主干路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！