Elixir 如果当前页面在Phoenix中，则在元素上应用CSS类

我目前正在寻找添加一个CSS类，如果一个页面是活动的。目前在凤凰城做这件事的最佳方式是什么？这个案子有帮手吗

def active(option, conn) do
  if option == conn.request_path do
    " class=\"active\""
  else
    ""
  end
end

在模板中：

<%= "contact" |> active(@conn) |> raw %>

active（@conn）|>raw%>

我为此创建了一个助手，看起来像：

defmodule LinkHelper
  @doc """
  Calls `active_link/3` with a class of "active"
  """
  def active_link(conn, controllers) do
    active_link(conn, controllers, "active")
  end

  @doc """
  Returns the string in the 3rd argument if the expected controller
  matches the Phoenix controller that is extracted from conn. If no 3rd
  argument is passed in then it defaults to "active".

  The 2nd argument can also be an array of controllers that should
  return the active class.
  """
  def active_link(conn, controllers, class) when is_list(controllers) do
    if Enum.member?(controllers, Phoenix.Controller.controller_module(conn)) do
      class
    else
      ""
    end
  end

  def active_link(conn, controller, class) do
    active_link(conn, [controller], class)
  end
end

然后在

web/web.ex

def view do
  ...
  import LinkHelper
  ...
end

用法：

<li class="<%= active_link(@conn, PageController)%>"><a href="<%= page_path(@conn, :index) %>">Home</a></li>
<li class="<%= active_link(@conn, [FooController, BarController])%>"><a href="<%= foo_path(@conn, :index) %>">Foo or Bar</a></li>

我们将使用

conn.path\u info

返回当前路径作为字符串列表，而不是

conn.request\u path

。我们可以用它进入我们的

active\u类

helper

def active_class(conn, path) do
  current_path = Path.join(["/" | conn.path_info])
  if path == current_path do
    "active"
  else
    nil
  end
end

然后我们使用它，就像：

<%= link "Users", to: user_path(@conn, :index), class: active_class(@conn, user_path(@conn, :index))%>

为什么使用

conn.path\u info

而不是

conn.request\u path

？这是因为

conn.request\u path

将返回用户请求的确切路径。如果用户访问路径

/foo/

，则

conn.request\u path

将返回

/foo/

。问题是我们将要比较的路由器帮助程序总是返回一个路径

/foo

，而不带尾随

/

---

希望有帮助！如果有任何不清楚的地方，请告诉我。

以下代码正在与我一起工作，包括参数跟踪：

助手功能如下所示：

def active_class(path, conn) do
  query_string = cond do
    conn.query_string == "" -> ""
    true -> "?#{conn.query_string}"
  end
  if ("#{conn.request_path}#{query_string}" === path) do "active" else "" end
end

并且认为：

<% important_issues_path = issue_path(@conn, :index, important: true) %>

<%= link "important", to: important_issues_path,
    class: "nav-link #{
      MyApp.TheHelper.active_class(important_issues_path, @conn)
   }"
%>

这看起来非常清晰和简单，可以直接使用路径

conn.request\u路径现在在github的0.15 master中，但它不在<0.15中。@rockerBOO你说得对。它在插件主控中。尝试过了，但我仍然建议使用
conn.path\u info
。我将更新我的答案，为什么这看起来是集成到控制器系统中的一个好选择。示例代码中的一些问题
defmodule LinkHelper do
和
import LinkHelper
@rockerBOO good spot-我复制导入时一定忘了更新导入！对于您传递给它的控制器的所有操作，该方法是否将链接设置为“活动”？例如，如果将
PageController
传递到
active\u链接/3
，则
page\u路径（@conn，：index）
和
page\u路径（@conn，：show）
都将设置为active。难道我们不希望仅当我们在page.show中时显示页面才处于“活动”状态吗？
<% important_issues_path = issue_path(@conn, :index, important: true) %>

<%= link "important", to: important_issues_path,
    class: "nav-link #{
      MyApp.TheHelper.active_class(important_issues_path, @conn)
   }"
%>