يجب علي أحيانًا إضافة فصل إلى عنصر 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
) ، لكن هذا لا ينتمي إلى هناك. ماذا يفعل معظم الناس؟
يمكنني استخدام الطريقة الأولى ، ولكن مع بناء جملة أكثر إيجازًا قليلاً:
<div class="<%= 'ok' if @status == 'success' %>">
على الرغم من أنه عادة ما يجب أن تمثل النجاح في المعرف المنطقي true
أو معرف سجل رقمي ، والفشل مع المعرف المنطقي false
أو nil
. بهذه الطريقة يمكنك فقط اختبار المتغير الخاص بك:
<div class="<%= 'ok' if @success %>">
نموذج ثانٍ باستخدام عامل التشغيل ?:
الثلاثي ، مفيد إذا كنت تريد الاختيار بين فئتين:
<div class="<%= @success ? 'good' : 'bad' %>">
أخيرًا ، يمكنك استخدام مساعدين لعلامات سجل Rail مثل div_for
، والتي ستقوم تلقائيًا بتعيين المعرف والفئة وفقًا للسجل الذي قدمته. إعطاء Person
بالكود 47:
# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>
تكمن المشكلة في الطريقة القياسية في أنها تتطلب منطقًا في شكل عبارات if
أو ثلاثية في طريقة العرض. إذا كان لديك العديد من فئات CSS الشرطية مختلطة مع الفئات الافتراضية ، فأنت بحاجة إلى وضع هذا المنطق في علامة استيفاء سلسلة أو علامة ERB.
إليك طريقة محدثة تتجنب وضع أي منطق في المشاهدات:
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
class_string
يأخذ المساعد class_string
تجزئة مع أزواج المفتاح/القيمة التي تتكون من سلاسل اسم فئة CSS و القيم المنطقية . نتيجة الطريقة عبارة عن سلسلة من الفئات التي يتم فيها تقييم القيمة المنطقية إلى صواب.
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'
) ، مرر صفيفًا حيث يكون العنصر الأول هو فئة true
والآخر لـ false
<div class="<%= [:good, :bad] => @success %>">
هذه التقنية مستوحاة من وظيفة إضافية تسمى classNames
(المعروفة سابقًا باسم classSet
) من إطار الواجهة الأمامية React
الخاص بـ Facebook.
اعتبارًا من الآن ، لا توجد وظيفة class_names
في Rails ، لكن توضح لك هذه المقالة كيفية إضافتها أو تنفيذها في مشاريعك.
يمكنك أيضًا استخدام content_for المساعد ، خاصةً إذا كان DOM موجودًا في تخطيط وتريد تعيين فئة css اعتمادًا على التحميل الجزئي.
على التصميم:
%div{class: content_for?(:css_class) ? yield(:css_class) : ''}
على الجزئي:
- content_for :css_class do
my_specific_class
هذا هو.