2013-01-16 61 views
0

我正在玩sammy.js并试图为我的SPA打造一个不错的菜单。我的HTML结构如下:Sammy.js导航菜单

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

工作时,这看起来并不像一个很好的解决这个非常普遍的问题。我想一定有更简单和习惯的东西,但我找不到任何东西。

任何人都可以指出我更好的解决方案吗?

回答

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

非常感谢回答!也许我不完全理解它,但是我在上面发布的解决方案的好处在哪里?这个看起来更不干爽和习惯? – bfncs

+0

你的版本看起来不错。我唯一的理由是我的版本是“Explicit” - 列表2中的第2行http://www.python.org/dev/peps/pep-0020/ – ddotsenko