elixir - 如果 Phoenix 的当前页面，则在元素上应用 CSS 类

Question

如果页面处于事件状态，我目前正在寻找添加 CSS 类。目前在 Phoenix 最好的方法是什么？这个案子有 helper 吗？

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

在模板中:

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

Answer 1

我们将使用 conn.path_info它将当前路径作为字符串列表返回，而不是 conn.request_path .我们可以用它来进入我们的active_class 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))%>

请注意，我们 user_path/2以上两次。我们可以用另一个助手把它干掉:

def active_link(conn, text, opts) do
  class = [opts[:class], active_class(conn, opts[:to])]
          |> Enum.filter(& &1) 
          |> Enum.join(" ")
  opts = opts
         |> Keyword.put(:class, class)
  link(text, opts)
end

为什么使用 conn.path_info而不是 conn.request_path ?这是因为 conn.request_path将返回用户请求的确切路径。如果用户访问路径 /foo/ ，然后 conn.request_path将返回 /foo/ .问题是我们将比较的路由器助手总是返回一个路径 /foo。没有尾随 / .
希望有帮助!让我知道是否有任何不清楚的地方。