ruby-on-rails 有条件地将类添加到视图中的HTML元素的优雅方式是什么?

cxfofazt  于 2023-10-21  发布在  Ruby
关注(0)|答案(5)|浏览(99)

我偶尔需要根据条件向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),但它不属于那里。大多数人都做什么?

mpgws1up

mpgws1up1#

我使用第一种方法,但语法稍微简洁一些:

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

不过通常你应该用boolean true或数字记录ID来表示成功,用boolean falsenil来表示失败。这样你就可以测试你的变量了:

<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 %>
z5btuh9x

z5btuh9x2#

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"

资料来源:

b1uwtaje

b1uwtaje3#

避免视图中的逻辑

标准方法的问题在于,它需要视图中if语句或三进制形式的逻辑。如果您有多个条件CSS类与默认类混合,那么您需要将该逻辑放入字符串插值或ERB标记中。
这里有一个更新的方法,它避免了将任何逻辑放入视图中:

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

class_string方法

class_string helper使用由CSS类名字符串布尔值组成的键/值对进行哈希。该方法的结果是一个类的字符串,其中布尔值计算为true。

示例用法

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

其他用例

这个helper可以在ERB标记中使用,也可以与link_to等Rails helper一起使用。

<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 %>

Either/Or类

对于需要三进制的用例(例如,@success ? 'good' : 'bad'),传递一个数组,其中第一个元素是true的类,另一个是false的类

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

灵感来自React

这项技术的灵感来自于Facebook的React前端框架中的一个名为classNames(以前称为classSet)的插件。

在Rails项目中使用

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

cngwdvgl

cngwdvgl4#

你也可以使用content_for帮助器,特别是当DOM位于布局中,并且你想根据加载的部分来设置css类的时候。
在布局上:

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

关于部分:

- content_for :css_class do
    my_specific_class

到此为止

uxh89sit

uxh89sit5#

如果你使用rails helper,你可以在class属性中使用这样的三进制

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

这意味着。如果有@account对象,则类将为dropdown-item,否则链接将被禁用dropdown-item disabled

相关问题