有条件地将类添加到视图中的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 表示成功,并且使用boolean false或者表示失败nil.这样你就可以测试你的变量:

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

?:如果要在两个类之间进行选择,则使用三元运算符的第二个表单非常有用:

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

最后,您可以使用Rail的记录标记帮助程序,例如div_for,它将根据您提供的记录自动设置您的ID和类.鉴于Personid为47:

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

Answer 2

避免视图中的逻辑

标准方法的问题在于它需要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项目中使用

截至目前,class_namesRails中不存在该函数,但本文将向您展示如何在项目中添加或实现它.

Answer 3

类名（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文档。