ビューの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>

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

回答:


141

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

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

けれども通常、あなたはブールで成功を表すべきtrueか、数値のレコードID、およびブールと故障falsenil。このようにして、変数をテストできます。

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

3項?:演算子を使用した2番目の形式は、2つのクラスから選択する場合に便利です。

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

最後に、あなたはレールの使用することができ、レコードタグヘルパーをのような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/…で確認してください。かなりきちんとしたもの。
マセック

リンク@macekをありがとう。これは、私はMooToolsの上の要素を作成する方法と非常によく似ています:)きちんと整頓
アヌラーグ

2
より良い答え:混乱を避け、ビューをHAMLに切り替えます。
貧弱

2
または、SLIMまで
Dr.Strangelove 2015

4
@ Dr.Strangelove、SLIMまたはHAMLが条件付きクラスをよりエレガントに処理する方法の例を示すことができますか?複数の条件付きクラスの場合はどうですか?
Brendon Muir

18

ビューでのロジックの回避

標準的なアプローチの問題ifは、ビューのステートメントまたは3値の形式のロジックが必要になることです。複数の条件付き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 %>

いずれか/またはクラス

3項が必要なユースケース(例@success ? 'good' : 'bad':)の場合、最初の要素がクラスでtrueあり、他の要素がクラスである配列を渡しますfalse

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

Reactに触発

この手法は、Facebookのフロントエンドフレームワークから呼び出されたclassNames(以前はと呼ばれていたclassSet)アドオンから発想を得たものReactです。

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

それだ。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.