如何以 DRY 方式将“活动”类应用到基于 current_page 的导航? - 轨道3

2024-01-05

所以在我的application.html.erb我的导航结构看起来像这样:

<div id="navigation">
            <ul class="pills">
                    <% if current_page?(:controller => 'welcome', :action => 'index') %>
                        <li><%= link_to "Profile", vanity_path(:vname => current_user.username) %></li>
                        <li><%= link_to "Settings", settings_path %></li>
                        <li><%= link_to "Sign Out", signout_path %></li>
                    <% elsif !current_page?(:controller => 'welcome', :action => 'index') %>
                        <li><%= link_to "Home", root_path %></li>
                        <li><%= link_to "Profile", vanity_path(:vname => current_user.username) %></li>
                        <li><%= link_to "Settings", settings_path %></li>
                        <li><%= link_to "Sign Out", signout_path %></li>              
                    <% end %>
            </ul>
        </div>

但是,我想做的是,一旦它们位于导航中的任何页面上,它就会应用一个类active到相应的链接。

例如,如果用户处于开启状态mydomain.com/johnbrown哪一个是Profile链接,rails 助手看起来像这样:

link_to "Profile", vanity_path(:vname => current_user.username), :class => "active".

但是我如何以编程方式做到这一点,这样我就不会重复内容?即如何为导航中的所有页面获取该功能并尽可能将其编写为 DRY?

Thanks.


这是一个非常好的问题。我对我见过或想出的解决方案一直不满意。也许我们可以在这里聚一聚。

这是我过去尝试过的

我创建了一个助手,它返回一个带有 :class 定义的哈希值,因为我使用了 HAML

def active_tab(path)
  request.path.match(/^#{path}/) ? { :class => 'active' } : {}
end

前用法:

= link_to "Dashboard", dashboard_path, active_tab("#{dashboard_path}$")

或者类似的替代方案

def active_class(path)
  request.path =~ /#{path}/ ? 'active' : nil
end

前用法:

= link_to 'Presentations', admin_presentations_path, :class => "#{active_class('presentations')}"

我很想看到关于此的一些其他建议。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何以 DRY 方式将“活动”类应用到基于 current_page 的导航? - 轨道3 的相关文章

随机推荐

  • 事件时间序列的数据库建议

    对于我的一个项目 我必须将大量事件集合输入数据库以供以后处理 并且我正在尝试确定哪个 DBMS 最适合我的目的 I have 目前大约有 400 000 000 个离散事件 数据库中将存储约 600 GB 的数据 这些事件有多种形式 但我估
  • 在c中创建我自己的memset函数

    这是原型 void memset void s int c size t n 首先 我不确定是否必须返回某些内容 因为当我使用 memset 时 我会这样做 memset str a 5 代替 str memset str a 5 这是我的
  • saveRDS 问题

    我在重新保存对象时表现出了 saveRDS 的奇怪行为 这是一个可重现的示例 df lt data frame a c 1 2 b c 3 4 saveRDS df test rds readRdsFile lt readRDS test
  • import React 和 import { Component } 语法之间的区别[重复]

    这个问题在这里已经有答案了 假设我们正在使用 React 和 ES6 我们将 React 和 Component 导入为 import React from react import Component from react 为什么语法不同
  • 使用ansible添加交换内存

    我正在开发一个项目 其中需要在我的服务器上拥有交换内存 以避免某些 python 长时间运行的进程耗尽内存 并第一次意识到我的 ubuntu vagrant box 和 AWS ubuntu 实例还没有交换内存设置 In https git
  • 如何解决语法错误:await 仅在异步函数中有效?

    我编写了一段代码 使用 Promise 从异步调用返回一些数据 当我尝试执行时 我得到 语法错误等待仅在异步函数中有效 并且我还得到无法代理应用程序请求 错误 连接ECONNREFUSED 我不确定为什么会出现这些错误 我尝试在函数调用之前
  • 显示核心数据:如果属性具有相同的名称,则显示一次

    我查看了许多谓词问题 阅读了文档 但似乎没有什么可以回答我的问题 我有一个名为的核心数据实体材料我有属性category 子类别 and 描述 我有三个UITableViewControllers在每个我想使用谓词来显示如下 TableVi
  • 从 Web API .NET Core get 操作返回字符串

    我有一个 get 操作 我想从中返回一个字符串 一个例子是 000875 当我从完整的 NET Web API 控制器中的控制器返回此字符串时 它的格式如下 Property 000875 当我在转换后的 NET Core 控制器中返回字符
  • webpack 对 *.js 的意外修改

    我是 webpack 和类似工具的新手 我想重新组织我的项目 目前我所有的 JS 代码都位于 App js 中 因此 在将其拆分为模块并进行改进之前 我只想设置复制它的工作流程 这是 webpack config js 的内容 const
  • 将ASP.Net Core 2.1preview2网站发布到本地IIS MSB3030 *.PrecompiledViews.dll

    Update 1 根据 Priyesh Kumar 的反馈 我使用了网站根文件夹中的以下命令 网站带有 csproj 的命令 这有效 然后我将 win10 x64 内容文件复制到 c www sigex com 中 dotnet publi
  • 在多阶段 docker 构建中使用变量

    我想在多阶段 docker 构建中使用变量 如同这个问题 https stackoverflow com questions 52904847 在撰写本文时尚未得到答复 我的具体用例是在builder阶段并保存目录 这是在变量中完成的 并在
  • React:创建 onClick HOC 而不使用额外的

    我想避免手动添加onClick我的自定义组件的属性 为此 我考虑了一个名为的高阶组件WithClick这将用集成的组件包裹我的组件onClick财产 我面临的问题是 为了包装它 我必须使用额外的 div div 标签来访问事件属性 这个标签
  • 如何以编程方式检测 ensemble 客户端中的哪个服务器连接到?

    如何以编程方式检测客户端连接到 ZooKeeper 集合中的哪台服务器 我正在使用阿帕奇策展人 http curator apache org API 和我正在通过注册监听连接状态变化连接状态监听器 https curator apache
  • ASP.NET WebAPI 中的模拟和异步

    Update 2 这个问题最初是 模仿可以与 Web API 一起使用吗 这个问题的问题是 是的 确实如此 但问题不在于 Web API 而在于模仿本身 问题描述如下 但现在我想告诉其他人解决方案 我的控制器是异步的 我错误的前提是模拟线程
  • 如何使用 C# 检查打印机是否已安装并准备就绪?

    如何使用 NET 3 5 和 Visual Studio 2008 在 C 中以编程方式检查打印机是否已安装 如果有 如何检查它是否已打开并准备好使用 提前致谢 此代码片段将检索有关已安装打印机的信息 using System Drawin
  • 读取或转换 word .doc 文件 iOS

    iOS 上的其他应用程序如何读取和写入 Word 文档 我看到其他一些与此相关的问题 并且接受的答案都是 这是不可能完成的 我不想只显示 Word 文档 我想阅读它及其格式 其他应用程序是如何做到这一点的 他们是否使用微软发布的发布标准自己
  • 如何实时处理音频流

    我有一个运行最新 jessie 的树莓派 3 的设置 其中安装了所有更新 其中我提供了一个 A2DP 蓝牙接收器 我可以在其中连接手机播放一些音乐 通过pulseaudio 源 电话 被路由到alsa 输出 接收器 这相当有效 我现在想使用
  • 可以在 SQLAlchemy 中执行没有子查询的 UNION 吗?

    另一个问题展示了如何在 SQLAlchemy 中进行联合 https stackoverflow com a 20032394 565879 是否可以在不使用子查询的情况下在 SQLAlchemy 中执行联合 例如 在链接的问题中 SQLA
  • Shopify option_selection.js - 如何修改?

    我遇到了一点麻烦 我正在重新设计我的商店 并尝试改变变体下拉菜单在前端的显示方式 据我所知 option selection js 是一个从 Shopifys 服务器托管和加载的全局资产 它改变了我的产品选项在我的主题中的显示方式 目前 它
  • 如何以 DRY 方式将“活动”类应用到基于 current_page 的导航? - 轨道3

    所以在我的application html erb我的导航结构看起来像这样 div ul class pills li li li li ul div