ビューでのロジックの回避
標準的なアプローチの問題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には存在しませんが、この記事では、関数をプロジェクトに追加または実装する方法を示します。