我偶尔需要根据条件向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
),但它不属于那里。大多数人都做什么?
5条答案
按热度按时间mpgws1up1#
我使用第一种方法,但语法稍微简洁一些:
不过通常你应该用boolean
true
或数字记录ID来表示成功,用booleanfalse
或nil
来表示失败。这样你就可以测试你的变量了:如果你想在两个类之间进行选择,使用三元
?:
运算符的第二种形式很有用:最后,您可以使用Rail的记录标记帮助程序,如
div_for
,它将根据您给予的记录自动设置您的ID和类。给定一个id为47的Person
:z5btuh9x2#
class_names(Rails 6.1+)
Rails 6.1引入了一个
class_names
视图帮助器,使在视图中有条件地应用类名变得更容易。使用前:
之后:
更多示例:
资料来源:
class_names
文档。b1uwtaje3#
避免视图中的逻辑
标准方法的问题在于,它需要视图中
if
语句或三进制形式的逻辑。如果您有多个条件CSS类与默认类混合,那么您需要将该逻辑放入字符串插值或ERB标记中。这里有一个更新的方法,它避免了将任何逻辑放入视图中:
class_string
方法class_string
helper使用由CSS类名字符串和布尔值组成的键/值对进行哈希。该方法的结果是一个类的字符串,其中布尔值计算为true。示例用法
其他用例
这个helper可以在
ERB
标记中使用,也可以与link_to
等Rails helper一起使用。Either/Or类
对于需要三进制的用例(例如,
@success ? 'good' : 'bad'
),传递一个数组,其中第一个元素是true
的类,另一个是false
的类灵感来自React
这项技术的灵感来自于Facebook的
React
前端框架中的一个名为classNames
(以前称为classSet
)的插件。在Rails项目中使用
到目前为止,
class_names
函数在Rails中还不存在,但this article向您展示了如何将其添加或实现到项目中。cngwdvgl4#
你也可以使用content_for帮助器,特别是当DOM位于布局中,并且你想根据加载的部分来设置css类的时候。
在布局上:
关于部分:
到此为止
uxh89sit5#
如果你使用rails helper,你可以在class属性中使用这样的三进制
这意味着。如果有@account对象,则类将为
dropdown-item
,否则链接将被禁用dropdown-item disabled