Loops এবং Conditionals ব্যবহার করে ডেটা প্রদর্শন

Ember.js-এ Loops (লুপ) এবং Conditionals (শর্তসাপেক্ষ) ব্যবহার করে ডেটা প্রদর্শন করার জন্য Handlebars টেমপ্লেট ইঞ্জিন ব্যবহার করা হয়। Handlebars একটি Mustache-অনুসরণকারী টেমপ্লেট ইঞ্জিন যা ডাইনামিক ডেটা প্রদর্শনের জন্য সহজ এবং শক্তিশালী উপায় প্রদান করে। আপনি {{#each}} লুপ এবং {{#if}} বা {{#unless}} কন্ডিশনাল ব্যবহার করে ডেটা রেন্ডার এবং শর্তানুযায়ী উপস্থাপন করতে পারেন।

এখানে Ember.js-এ loops এবং conditionals ব্যবহার করে ডেটা প্রদর্শনের পদ্ধতি নিয়ে বিস্তারিত আলোচনা করা হবে।

1. Loops (লুপ) ব্যবহার করে ডেটা প্রদর্শন

Ember.js-এ {{#each}} হ্যান্ডেলবার্স হেল্পার ব্যবহার করে আপনি একটি অ্যারের সমস্ত আইটেমের উপর লুপ করতে পারেন। এটি খুবই সহায়ক যখন আপনি কোনো তালিকা বা ডেটাবেস থেকে প্রাপ্ত তথ্যকে প্রদর্শন করতে চান।

{{#each}} লুপ ব্যবহার

{{#each}} হ্যান্ডেলবার্স ব্লক হেল্পারকে ব্যবহার করে আপনি অ্যারে বা অবজেক্টের উপর লুপ করতে পারেন। উদাহরণস্বরূপ, যদি আপনার কাছে ব্যবহারকারীদের একটি তালিকা থাকে এবং আপনি এটি টেমপ্লেটে দেখাতে চান, তবে তা এইভাবে করা হবে:

// app/routes/application.js
import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  model() {
    return [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
      { id: 3, name: 'Alice Johnson' }
    ];
  }
}

এখানে, model() মেথডের মাধ্যমে আমরা একটি অ্যারে তৈরি করেছি, যেখানে কিছু ব্যবহারকারীর তথ্য রয়েছে। এখন, এই ডেটাকে টেমপ্লেটে লুপ করতে হবে।

<!-- app/templates/application.hbs -->
<ul>
  {{#each model as |user|}}
    <li>{{user.name}}</li>
  {{/each}}
</ul>

এখানে:

• {{#each model as |user|}} ব্লক হেল্পারটি model অ্যারের প্রতিটি আইটেমের উপর লুপ করবে এবং প্রতি আইটেমকে user নামক একটি লুপ ভ্যারিয়েবলে অ্যাসাইন করবে।
• {{user.name}} ব্যবহার করে প্রতিটি ব্যবহারকারীর নাম রেন্ডার করা হয়েছে।

2. Conditionals (শর্তানুযায়ী) ব্যবহার করে ডেটা প্রদর্শন

Ember.js-এ শর্তানুযায়ী ডেটা প্রদর্শনের জন্য {{#if}} এবং {{#unless}} হ্যান্ডেলবার্স হেল্পার ব্যবহার করা হয়।

{{#if}} শর্ত ব্যবহার

{{#if}} হেল্পারটি একটি শর্ত যাচাই করে এবং যদি শর্তটি সত্য হয়, তবে তার মধ্যে থাকা কোডটি রেন্ডার করবে।

<!-- app/templates/application.hbs -->
{{#if model}}
  <h2>Users List</h2>
  <ul>
    {{#each model as |user|}}
      <li>{{user.name}}</li>
    {{/each}}
  </ul>
{{else}}
  <p>No users available.</p>
{{/if}}

এখানে:

• {{#if model}} শর্তটি যাচাই করছে যে model ডেটা রয়েছে কি না।
• যদি model অ্যারে থাকে, তাহলে Users List এবং তার তালিকা রেন্ডার হবে।
• যদি model অ্যারে খালি থাকে, তবে No users available. মেসেজটি দেখানো হবে।

{{#unless}} শর্ত ব্যবহার

{{#unless}} হেল্পারটি if এর বিপরীত। এটি তখন কার্যকর হয় যখন শর্তটি মিথ্যা হয়।

<!-- app/templates/application.hbs -->
{{#unless model}}
  <p>No users found</p>
{{/unless}}

এখানে:

• {{#unless model}} শর্তটি তখন সত্য হবে যখন model ডেটা উপস্থিত না থাকে, এবং No users found মেসেজটি দেখাবে।

3. Complex Conditions (জটিল শর্ত) ব্যবহার

Ember.js-এ একাধিক শর্ত ব্যবহার করতে {{#if}} এর মধ্যে else এবং elseif ব্যবহার করা যায়। তবে, Handlebars সরাসরি elseif সাপোর্ট করে না, তাই আপনাকে {{#if}} এবং {{else if}} এরকম কাঠামো তৈরি করতে হবে।

<!-- app/templates/application.hbs -->
{{#if isUserLoggedIn}}
  <h2>Welcome, User!</h2>
{{else if isAdmin}}
  <h2>Welcome, Admin!</h2>
{{else}}
  <h2>Please log in.</h2>
{{/if}}

এখানে:

• isUserLoggedIn এবং isAdmin দুইটি শর্ত রয়েছে।
• প্রথম শর্ত যদি সত্য হয়, তবে Welcome, User! মেসেজটি প্রদর্শিত হবে।
• যদি প্রথম শর্ত মিথ্যা হয়, তবে isAdmin শর্তটি পরীক্ষা করা হবে, এবং যদি তা সত্য হয়, তবে Welcome, Admin! প্রদর্শিত হবে।

4. Combining Loops and Conditionals (লুপ এবং কন্ডিশনাল একত্রে ব্যবহার)

আপনি লুপ এবং শর্ত একত্রে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, যদি আপনি ব্যবহারকারীদের তালিকায় কেবলমাত্র সক্রিয় ব্যবহারকারীদের প্রদর্শন করতে চান:

<!-- app/templates/application.hbs -->
<ul>
  {{#each model as |user|}}
    {{#if user.isActive}}
      <li>{{user.name}}</li>
    {{/if}}
  {{/each}}
</ul>

এখানে:

• {{#each model as |user|}} লুপের মাধ্যমে model অ্যারের প্রতিটি আইটেমে যান।
• {{#if user.isActive}} শর্তটি যাচাই করছে যে user.isActive সত্য কি না। যদি সত্য হয়, তবে সেই ব্যবহারকারীর নামটি রেন্ডার হবে।

Ember.js-এ loops এবং conditionals ব্যবহার করে ডেটা প্রদর্শন করা খুবই সহজ এবং শক্তিশালী। Handlebars টেমপ্লেট ইঞ্জিন {{#each}} এবং {{#if}} বা {{#unless}} হেল্পারের মাধ্যমে আপনি অ্যারের উপর লুপ চালাতে এবং শর্তানুযায়ী ডেটা রেন্ডার করতে পারবেন। এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে ডাইনামিক এবং ইন্টারেক্টিভ উপাদান যুক্ত করতে সক্ষম হবেন।