Phoenix 动态类名 Phoenix.HTML

Question

我想将动态类名与静态类名连接起来。

<div class=<%="#{getClass(app.status)} two" %>

这会导致

<div class="one" two>

而不是

<div class="one two">

如何解决这个问题？

Answer 1

如果您在 Elixir 中使用 Phoenix，则可以这样做：

<div class={"fixed-left #{if @current_user do 'login-page' end}"}>

Answer 2

您应该使用

<div class="<%= getClass(app.status)} %> two">

。

<%= %>

评估 Elixir 代码并将结果注入 HTML 的任何部分。
您可以在 HTML 标记内注入值：

<div>
  <%= @user_name %>
</div>

或任何 HTML 属性

<a class="btn <%= if(@alert, do: "btn-danger", else: "btn-primary") %>">...</a>

或者设置HTML属性

<button class="btn btn-success" <%= if(@disable_button, do: "disabled", else: "tooltip=\"button is working\"") %>">...</button>

Answer 3

我会这样做：

<div class={"#{getClass(app.status)} two"}>
<div class={"fixed-left #{if @current_user, do: "login-page"}"}>

我认为这比 JuliSmz 发布的代码更惯用。请注意使用字符串 (

"login-page"

) 而不是字符列表 (

'login-page'

)，并且更短的

if

没有

end

。

或者我根本不会搞乱字符串连接并传递这样的列表：

<div class={[getClass(app.status), "two"]}>
<div class={["fixed-left", (if @current_user, do: "login-page")]}>

这种方法的小好处是，当

<div class="fixed-left">

为

<div class="fixed-left ">

时，我们得到

@current_user

而不是

nil

。

请参阅文档了解更多信息。

请注意，这两种方法仅在 HEEx（

.html.heex

文件或

~H

印记）中可用，该文件自 Phoenix 1.6 起可用，因此在 OP 提出原始问题时，这两种方法都无效。如果没有 HEEx（在 EEx 中），我会像 sbacarob 和 CarefreeSlacker 提议的那样做，即：

<div class="<%= getClass(app.status) %> two">
<div class="fixed-left <%= if @current_user, do: "login-page" %>">