Меню навигации Sammy.js

Question

Я играю с 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');
});

Во время работы это не выглядит хорошим решением этой очень распространенной проблемы. Наверное, должно быть что-то более простое и идиоматическое, но я не смог ничего найти.

Кто-нибудь может указать мне на лучшее решение?

Answer 1

Обновите класс в коде обработчика маршрута, чтобы он знал, на каком маршруте вы находитесь сейчас, и может просто найти его в списке.

Для этой разметки:

<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')
})