有条件地将类添加到视图中的 HTML 元素的优雅方法是什么？

Question

我偶尔需要根据条件向 html 元素添加一个类。问题是我无法找到一种干净的方法。这是我尝试过的例子：

<div <%= if @status = 'success'; "class='ok'"; end %>>
   some message here
</div>

或

<% if @status == 'success' %>
   <div class='success'>
<% else %>
   <div>
<% end %>
   some message here
</div>

我不喜欢第一种方法，因为它看起来很拥挤并且难以阅读。我不喜欢第二种方法，因为嵌套搞砸了。最好将它放入模型中（类似于

@status.css_class

），但这不属于那里。大多数人做什么？

Answer 1

我使用第一种方式，但语法稍微简洁一些：

<div class="<%= 'ok' if @status == 'success' %>">

尽管通常您应该使用布尔值

true

或数字记录 ID 表示成功，并使用布尔值

false

或

nil

表示失败。这样你就可以测试你的变量：

<div class="<%= 'ok' if @success %>">

如果您想在两个类之间进行选择，则使用三元

?:

运算符的第二种形式非常有用：

<div class="<%= @success ? 'good' : 'bad' %>">

最后，您可以使用 Rail 的 记录标签助手，例如

div_for

，它将根据您提供的记录自动设置您的 ID 和类别。给定一个 id 为 47 的

Person

：

# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>

Answer 2

class_names（Rails 6.1+）

Rails 6.1 引入了

class_names

视图助手 更容易有条件地应用类名 在视图中。

之前：

<div class="<%= item.for_sale? ? 'active' : '' %>">

之后：

<div class="<%= class_names(active: item.for_sale?) %>">

更多示例：

class_names("foo", "bar")
# => "foo bar"
class_names({ foo: true, bar: false })
# => "foo"
class_names(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"

来源：

• 链接到相应的 PR。
• 链接到

  class_names

  文档。

Answer 3

避免视图中的逻辑

标准方法的问题在于它需要视图中

if

语句或三元组形式的逻辑。如果您有多个条件 CSS 类与默认类混合，那么您需要将该逻辑放入字符串插值或 ERB 标记中。

这是一种更新的方法，可以避免将任何逻辑放入视图中：

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

class_string

方法

class_string

帮助器采用由CSS类名字符串和布尔值组成的键/值对的哈希。该方法的结果是一个类的字符串，其中布尔值评估为 true。

使用示例

class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"

其他用例

此帮助器可以在

ERB

标签内使用，或与 Rails 帮助器（例如

link_to

）一起使用。

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

<% div_for @person, class: class_string(ok: @success) do %>
<% end %>

<% link_to "Hello", root_path, class: class_string(ok: @success) do %>
<% end %>

要么/要么课程

对于需要三元组的用例（例如

@success ? 'good' : 'bad'

），请传递一个数组，其中第一个元素是

true

的类，另一个元素是

false

的类

<div class="<%= [:good, :bad] => @success %>">

受到 React 的启发

该技术的灵感来自 Facebook

classNames

前端框架中名为

classSet

（以前称为

React

）的插件。

在 Rails 项目中使用

到目前为止，Rails 中尚不存在

class_names

函数，但是 本文 向您展示了如何将其添加或实现到您的项目中。

Answer 4

您还可以使用 content_for 帮助器，特别是如果 DOM 位于布局中并且您想要根据部分加载来设置 css 类。

关于布局：

%div{class: content_for?(:css_class) ? yield(:css_class) : ''}

部分：

- content_for :css_class do
    my_specific_class

就是这样。

Answer 5

如果您使用 Rails 助手，您可以在类属性中使用这样的三元组

<%= link_to "My Account", account_path, class: @account.present? ? 'dropdown-item' : 'dropdown-item disabled' %>

这意味着什么。如果有@account对象，那么该类将为

dropdown-item

，否则链接将被禁用

dropdown-item disabled