सशर्त रूप से HTML तत्व को देखने के लिए कक्षा में जोड़ने का एक सुंदर तरीका क्या है?

Question

मुझे कभी-कभी एक शर्त के आधार पर एक 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), लेकिन यह वहां नहीं है। ज्यादातर लोग क्या करते हैं?

Answer 1

मैं पहले तरीके का उपयोग करता हूं, लेकिन थोड़ा अधिक सक्सेना सिंटैक्स के साथ:

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

हालांकि आमतौर पर आपको बूलियन trueया संख्यात्मक रिकॉर्ड आईडी के साथ सफलता का प्रतिनिधित्व करना चाहिए , और बूलियन के साथ विफलता falseया nil। इस तरह से आप अपने चर का परीक्षण कर सकते हैं:

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

?:यदि आप दो वर्गों के बीच चयन करना चाहते हैं, तो टर्नरी ऑपरेटर का उपयोग करने वाला दूसरा रूप उपयोगी है:

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

अंत में, आप रेल के रिकॉर्ड टैग हेल्पर्स का उपयोग कर सकते हैं div_for, जैसे कि आपके द्वारा दिए गए रिकॉर्ड के आधार पर आपकी आईडी और क्लास को स्वचालित रूप से सेट करेगा। एक को देखते हुए Personआईडी 47 के साथ:

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

Comments

@ अनुराग, इसे देखें api.rubyonrails.org/classes/ActionController/… । बहुत साफ सुथरा सामान।

— माटेक

लिंक @macek के लिए धन्यवाद। यह बहुत कुछ इसी तरह से है कि मैं MooTools पर तत्व कैसे बनाऊं :) साफ सुथरा

— अनुराग

बेहतर उत्तर: पूरी गड़बड़ी से बचें और अपने विचारों को एचएएमएल पर स्विच करें ।

— meagar

या, इससे भी बेहतर, SLIM के लिए

— Dr.Strangelove

@ Dr.Strangelove, क्या आप इस बात का उदाहरण दे पाएंगे कि SLIM या HAML सशर्त वर्गों को अधिक सुरुचिपूर्ण ढंग से कैसे संभालेंगे? कई सशर्त वर्गों के मामले में कैसे?

— ब्रेंडन मुइर

Answer 2

विचारों में तर्क से बचना

मानक दृष्टिकोण के साथ समस्या यह है कि इसे ifदेखने में कथन या टर्नरी के रूप में तर्क की आवश्यकता होती है । यदि आपके पास कई सशर्त सीएसएस कक्षाएं डिफ़ॉल्ट कक्षाओं के साथ मिश्रित हैं, तो आपको उस तर्क को एक स्ट्रिंग प्रक्षेप या ईआरबी टैग में डालने की आवश्यकता है।

यहां एक अद्यतन दृष्टिकोण है जो किसी भी तर्क को विचारों में डालने से बचता है:

<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टैग के भीतर या रेल सहायकों जैसे कि के साथ किया जा सकता है 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।

अपने रेल परियोजनाओं में उपयोग करना

अब तक, class_namesफ़ंक्शन रेल में मौजूद नहीं है, लेकिन यह आलेख आपको दिखाता है कि इसे अपनी परियोजनाओं में कैसे जोड़ा या लागू किया जाए।

Answer 3

आप content_for हेल्पर का उपयोग भी कर सकते हैं, खासकर अगर DOM एक लेआउट में स्थित है और आप आंशिक लोड के आधार पर css क्लास सेट करना चाहते हैं।

लेआउट पर:

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

आंशिक पर:

- content_for :css_class do
    my_specific_class

बस इतना ही।