如何添加"活跃"导航栏?

时间:2014-10-05 21:10:26

标签: twitter-bootstrap-3 sails.js

我正在关注“SailsCasts”,我想弄清楚如何根据我正在浏览的链接从导航栏中的“活动”类设置.ejs模板。

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

要通过路线传递的参数?

1 个答案:

答案 0 :(得分: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>

希望有所帮助。