Css Ruby on Rails Haml

كيفية تعيين قيمة فئة ديناميكية في Haml

إذا كنت تنتقل من ERB إلى Haml في مشاريع Ruby on Rails الخاصة بك، فقد تجد نفسك بحاجة إلى تمثيل قيم ديناميكية داخل هيكل HTML الخاص بك. على وجه الخصوص، هناك سيناريو شائع يتمثل في تعيين فئة CSS بشكل ديناميكي بناءً على حالة عنصر. سيوجهك هذا المنشور على كيفية تحقيق ذلك في Haml.

المشكلة

قد يكون لديك سطر من الكود مثل هذا في قالب ERB الخاص بك:

<span class="<%= item.dashboardstatus.cssclass %>"><%= item.dashboardstatus.status %></span>

هذا الكود يرتبط بفعالية بفئة CSS للوضع الحالي المعين لعناصر <span>. عندما تحاول تحويل هذا الكود إلى Haml، قد يبدو الأمر مربكًا بعض الشيء في البداية. تريد التأكد من أن السلوك الديناميكي يبقى intact أثناء استخدام بنية Haml النظيفة.

الحل في Haml

Haml يبسط العروض من خلال السماح لك بكتابة كود أقل مع تحسين قابلية القراءة. لتحويل السطر أعلاه إلى Haml، يمكنك اتباع هذا الأسلوب:

%span{:class => item.dashboardstatus.cssclass}= item.dashboardstatus.status

تحليل كود Haml

دعنا نفكك هذا الجزء من كود Haml لفهم كيفية عمله:

  1. %span: تشير هذه الجزء إلى أنك ترغب في إنشاء عنصر HTML <span>.

  2. {:class => item.dashboardstatus.cssclass}: هنا تحدث السحر! هذه البنية تضبط السمة class لعنصر <span> باستخدام هاش Ruby. المفتاح :class يشير إلى أننا نقوم بتعيين فئة CSS، والقيمة يتم استرجاعها ديناميكيًا من item.dashboardstatus.cssclass.

  3. = item.dashboardstatus.status: تشير علامة المساواة (=) إلى أن ما يلي يجب إدراجه كمحتوى لـ <span>، والذي في هذه الحالة هو قيمة item.dashboardstatus.status.

لماذا تستخدم Haml؟

يمكن أن يحسن استخدام Haml سير عمل التطوير لأسباب عدة:

  • بنية أنظف: تستخدم Haml المسافات لإظهار التداخل، مما يؤدي إلى فوضى أقل مقارنةً بـ HTML التقليدي.
  • كود أقل: غالبًا ما تكتب أقل عدد من الأسطر مع تحقيق نفس الناتج، مما يجعل ملفات العرض الخاصة بك أسهل في القراءة والصيانة.
  • قابلية قراءة محسنة: تسلط بنية Haml الضوء على أهمية التصميم والتخطيط، مما يسهل على المطورين العثور على الأخطاء أو فهم تدفق العرض.

الخاتمة

يمكنك تعيين قيمة فئة ديناميكية في Haml من خلال تعديل بسيط من بنية ERB. من خلال استخدام بنية الهاش لسمات الفئة combined مع إدراج المحتوى الديناميكي لـ Ruby، لا تقوم فقط بالحفاظ على الوظائف ولكنك أيضًا تعزز من قابلية القراءة.

الآن بعد أن تعلمت كيفية تحويل كود ERB الخاص بك، ستجد أنه من الأسهل العمل مع Haml في تطبيقات Rails الخاصة بك. احتضن هذه التغييرات واستمتع بإنشاء عروض مصممة بثراء بسهولة!