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