2014-10-05 68 views
1

我正在关注“SailsCasts”,我想知道如何根据我正在浏览的链接,在导航栏中从“active”类中设置.ejs模板。如何将“活动”类添加到导航栏?

我不想使用页面的“标题”以及想象中的很弱。我也不想在客户端使用JavaScript。我希望导航栏Bootstrap中的“活动”类直接写在服务器端,具体取决于我访问的页面。

要通过路由传递的参数?

回答

7

根据当前的控制器和操作,您可以在EJS文件中设置HTML元素的类。该信息存储在所有视图中公开的名为req.options的变量中。

您可以访问使用它的方式如下:

/views/navigation.ejs

<ul> 
    <li class="<%- (req.options.controller === 'someController' && req.options.action === 'someAction') ? 'active' : ''%>">User list</li> 
</ul> 

如果你要多次使用这种方法,你应该建立一个全球服务:

/api/services/Helper.js

module.exports = { 
    isCurrentPage: function(req, controller, action) { 
    return (req.options.controller === controller && req.options.action === action) 
    } 
} 

然后,在你的EJS观点:

/views/navigation.ejs

<ul> 
    <li class="<%= Helper.isCurrentPage(req, 'users', 'list') ? 'active' : ''%>">User list</li> 
</ul> 

希望有所帮助。

+0

感谢您的回复。但它不起作用。我有一个控制器UserController.js和我写===用户,但我有一个错误:'用户没有定义]'。如果我写'用户',那么我没有错误,但没有出现。如果我放置或放弃'&&动作等......'也是一样。怎么修? – ginolon 2014-10-06 20:15:36

+0

比较运算符右侧的变量必须是字符串。例如 <%=(req.options.controller ==='user')? 'active':''%> – abeja 2014-10-07 00:53:53

+0

对不起,@abeja,但Helper.js不起作用。它说错误:req没有定义]。如何? – ginolon 2014-10-07 16:06:03