6

Backbone.js ハッシュ ベースのルーティングを使用している場合、Bootstrap の Scrollspy を使用するにはどうすればよいですか?

ページ 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();
});

URL の末尾に #anchor-value を追加する 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>

これは、URL を www.example.com/#somePage/123#step1 のようなものに変更しようとしていますが、これは機能していません。

4

1 に答える 1

0

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も設定されています。これは、ルーティング ハンドラが起動することを意味します。これが必要ない場合は、このオプションを削除してください。

于 2016-10-25T13:54:20.707 に答える