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

但通常你应该用布尔值来表示成功 true false 或 nil . 这样您就可以测试变量:

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

第二种形式使用三元 ?:

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

最后,你可以使用铁路的 record tag helpers 例如 div_for ,它将根据您提供的记录自动设置您的ID和类。给予 Person 身份证号47:

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

避免视图中的逻辑

if 视图中的语句或术语。如果有多个条件CSS类与默认类混合,那么需要将该逻辑放入字符串插值或ERB标记中。

下面是一个更新的方法,它可以避免在视图中添加任何逻辑:

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

class_string

这个 helper使用由 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

此技术的灵感来自一个名为 classNames (原名 classSet React 前端框架。

在Rails项目中使用

到目前为止 class_names 函数在Rails中不存在,但是 this article 向您展示如何将其添加或实现到项目中。

类名(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"

资料来源:

• Link to the corresponding PR
• Link to the class_names docs .

您还可以使用content\u for helper,特别是如果DOM位于布局中,并且您希望根据加载的部分设置css类。

在布局上:

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

- content_for :css_class do
    my_specific_class

就是这样。