0

私は sammy.js をいじっていて、SPA 用の素敵なメニューを作成しようとしていました。私のHTML構造は次のようになります。

<nav class="navMain">
  <ul class="nav">
    <li class="active"><a href="/#/">Home</a></li>
    <li><a href="/#aroute">A route</a></li>
    <li><a href="/#anotherroute">Anouther route</a></li>
  </ul>
</nav>
<div class="main">
  <!-- here goes everything I do with sammy -->
</div>

確かに私がやりたいことは、activeそのページへのルーティングでクラスを他のメニュー項目に与えることです。これまでのところ、これに関する例は見つかりませんでしたが、これを思いつきました:

this.bind('run-route', function() {
  var path = this.params.path;      
  $('.navMain li').removeClass('active').find('a[href*="' + path + '"]').parent().addClass('active');
});

作業中、これはこの非常に一般的な問題に対する良い解決策のようには見えません。もっと簡単で慣用的なものがあるに違いないと思いますが、何も見つかりませんでした。

誰でもより良い解決策を教えてもらえますか?

4

1 に答える 1

0

ルート ハンドラー コードのクラスを更新します。これにより、現在のルートが認識され、リストでそれを見つけることができます。

このマークアップの場合:

<nav class="navMain">
  <ul class="nav">
    <li class="active"><a href="#/">Home</a></li>
    <li><a href="#/aroute/">A route</a></li>
    <li><a href="#/anotherroute/">Anouther route</a></li>
  </ul>
</nav>

JS は次のとおりです。

function SetActiveLink(name){
    var ul = $('ul')

    ul.children().removeClass('active')

    ul.find('a[href="#/'+name+'/"]').parent().addClass('active')
}

sammyapp.route('get','#/a/', function() {
    SetActiveLink('a')
})

sammyapp.route('get','#/b/', function() {
    SetActiveLink('b')
})
于 2013-01-17T03:10:45.440 に答える