শর্তসাপেক্ষে কোনও ভিউতে কোনও এইচটিএমএল উপাদানকে ক্লাস যুক্ত করার একটি দুর্দান্ত উপায় কী?

Question

আমাকে মাঝে মধ্যে শর্তের ভিত্তিতে এইচটিএমএল উপাদানটিতে একটি ক্লাস যুক্ত করতে হয়। সমস্যাটি হ'ল আমি এটি করার কোনও পরিষ্কার উপায় বের করতে পারি না। আমি চেষ্টা করেছি এমন সামগ্রীর উদাহরণ এখানে:

<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, যা স্বয়ংক্রিয়ভাবে আপনার আইডি এবং শ্রেণিটি আপনি প্রদত্ত রেকর্ডের উপর ভিত্তি করে সেট করবে। Person47 আইডি সহ একটি দেওয়া হয়েছে :

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

Comments

@ অনুরাগ, এটি দেখুন api.rubyonrails.org/classes/ActionController/… । খুব সুন্দর পরিষ্কার স্টাফ।

— maček

লিঙ্কের জন্য ধন্যবাদ @ ম্যাসেক। এটি আমি মিটুলগুলিতে কীভাবে উপাদানগুলি তৈরি করছি তার সাথে খুব মিল :) পরিষ্কার পরিচ্ছন্ন

— অনুরাগ

আরও ভাল উত্তর: সম্পূর্ণ জগাখিচুড়ি এড়ানো এবং আপনার ভিএলএইচএএমএলে স্যুইচ করুন ।

— মেগার

বা, আরও ভাল,

— এসএলআইএম

@ ডাঃ স্ট্রেঞ্জলওয়েভ, আপনি কীভাবে এসএমআইএম বা এইচএএমএল আরও শর্তযুক্ত শর্তাধীন ক্লাস পরিচালনা করবেন তার একটি উদাহরণ দিতে সক্ষম হবেন? একাধিক শর্তাধীন ক্লাসের ক্ষেত্রে কীভাবে?

— ব্রেন্ডন মুইর

Answer 2

মতামত যুক্তি এড়ানো

স্ট্যান্ডার্ড পদ্ধতির সমস্যাটি হ'ল এটির ifপক্ষে দৃশ্যের বিবৃতি বা টেরিনারি আকারে যুক্তি প্রয়োজন requires যদি আপনার ডিফল্ট ক্লাসগুলির সাথে একাধিক শর্তযুক্ত সিএসএস ক্লাস মিশ্রিত থাকে তবে আপনার সেই যুক্তিটি স্ট্রিং ইন্টারপোলেশন বা ইআরবি ট্যাগের মধ্যে লাগাতে হবে।

এখানে একটি আপডেট পন্থা যা ভিউগুলিতে কোনও যুক্তি স্থাপন করা এড়িয়ে যায়:

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

class_string পদ্ধতি

class_stringসাহায্যকারী গঠিত কী / মান জোড়া দিয়ে একটি হ্যাশ লাগে সিএসএস বর্গ নাম স্ট্রিং এবং বুলিয়ান মান । পদ্ধতির ফলাফলটি ক্লাসগুলির একটি স্ট্রিং যেখানে বুলিয়ান মানটি সত্য হিসাবে মূল্যায়ন করা হয়।

নমুনা ব্যবহার

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

আপনি কনটেন্ট_স সহায়তার জন্যও ব্যবহার করতে পারেন, বিশেষত যদি ডিওএম একটি লেআউটে থাকে এবং আপনি আংশিক লোডের উপর নির্ভর করে সিএসএস শ্রেণি সেট করতে চান।

লেআউটে:

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

আংশিক:

- content_for :css_class do
    my_specific_class

হ্যাঁ, ওটাই.