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

Question

我目前正在寻找在页面处于活动状态时添加CSS类.凤凰目前最好的办法是什么？这个案子有帮助吗？

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.

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, path, opts) do
  class = [opts[:class], active_class(conn, path)]
          |> Enum.filter(& &1) 
          |> Enum.join(" ")
  opts = opts
         |> Keyword.put(:class, class)
         |> Keyword.put(:to, path)
  link text, opts
end

为什么用conn.path_info而不是conn.request_path？这是因为conn.request_path将返回用户请求的确切路径.如果用户访问路径/foo/,则conn.request_path返回/foo/.问题是我们将要比较的路由器助手将始终返回/foo没有尾随的路径/.

希望有所帮助!如果有什么不清楚,请告诉我.

Answer 2

我为此创建了一个帮助器，如下所示：

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

然后，我将其导入到def view函数内部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>