web-dev-qa-db-ja.com

ビューのHTML要素にクラスを条件付きで追加するエレガントな方法は何ですか？

条件に基づいてクラスを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>

私は最初のアプローチが好きではありません。見た目が混雑していて読みにくいからです。ネストがめちゃくちゃになっているため、2番目のアプローチは好きではありません。モデルに入れておくといいでしょう（@status.css_class）、しかし、それはそこに属していません。ほとんどの人は何をしますか？

ruby-on-railsviews
93
ryeguy

私は最初の方法を使用しますが、少し簡潔な構文を使用します。

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

通常、ブールtrueまたは数値レコードIDで成功を表し、ブールfalseまたはnilで失敗を表す必要があります。この方法で、変数をテストできます。

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

3つの?:演算子を使用する2番目のフォームは、2つのクラスから選択する場合に便利です。

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

最後に、div_forなどのRailの レコードタグヘルパー を使用できます。これにより、指定したレコードに基づいてIDとクラスが自動的に設定されます。 ID 47のPersonを指定すると：

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

ビューのロジックを回避する

標準的なアプローチの問題は、ビューにifステートメントまたは3項の形式のロジックが必要なことです。複数の条件付きCSSクラスとデフォルトクラスが混在している場合、そのロジックを文字列補間またはERBタグに配置する必要があります。

ビューにロジックを追加することを回避する更新されたアプローチを次に示します。

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

class_string 方法

class_stringヘルパーは、CSSクラス名文字列およびboolean値。メソッドの結果は、ブール値が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 %>

どちらかまたは両方のクラス

3進数が必要なユースケース（例：@success ? 'good' : 'bad'）、最初の要素がtrueのクラスで、もう1つの要素がfalseのクラスである配列を渡します

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

Reactに触発

この手法は、FacebookのclassNamesフロントエンドフレームワークのclassSet（以前はReactとして知られていました）というアドオンに触発されています。

Railsプロジェクトで使用する

現在のところ、class_names関数はRailsには存在しませんが、 この記事 は、プロジェクトに関数を追加または実装する方法を示しています。

15
Carlos Ramirez III

Content_forヘルパーを使用することもできます。特に、DOMがレイアウト内にあり、ロードされた部分に応じてcssクラスを設定する場合。

レイアウト上：

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

部分的に：

- content_for :css_class do
    my_specific_class

それだ。

2
acmoune