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


103

我有时不得不根据条件向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),但这不属于该模型。大多数人做什么?

Answers:


141

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

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

虽然通常你应该表示与布尔成功true或数字记录ID,并以失败布尔falsenil。这样,您可以测试您的变量:

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

@Anurag,请查看api.rubyonrails.org/classes/ActionController/…。很整洁的东西。
maček

感谢您的链接@macek。这与我在MooTools上创建元素的方式非常相似:)整洁
Anurag 2010年

2
更好的答案:避免整个混乱,将视图切换到HAML
meagar

2
或者,甚至更适合SLIM
Dr.Strangelove

4
@ Dr.Strangelove,您能否举一个例子说明SLIM或HAML如何更优雅地处理条件类?在多个条件类的情况下呢?
布伦登·缪尔

18

在视图中避免逻辑

标准方法的问题在于,它需要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'),传递一个数组,其中第一个元素是for的类,true另一个是for的类false

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

受React启发

这项技术的灵感来自Facebook 前端框架中的一个插件classNames(以前称为classSetReact

在Rails项目中使用

到目前为止,该class_names功能在Rails中不存在,但是本文向您展示了如何在项目中添加或实现它。


2

您还可以使用content_for辅助程序,尤其是在DOM位于布局中并且您要根据部分加载来设置css类的情况下。

在布局上:

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

关于偏:

- content_for :css_class do
    my_specific_class

这就对了。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.