Repeaters এবং Conditionals (if.bind, repeat.for)

Aurelia ফ্রেমওয়ার্কে Repeaters এবং Conditionals হল দুটি গুরুত্বপূর্ণ ফিচার যা ডায়নামিক এবং ইন্টারঅ্যাকটিভ UI তৈরি করতে ব্যবহৃত হয়। এগুলি ডেটা বাইন্ডিং এবং ডেটা ম্যানিপুলেশনের জন্য ব্যবহার করা হয়, যাতে আপনি সহজেই কন্টেন্ট পুনরাবৃত্তি (loop) করতে পারেন এবং শর্তসাপেক্ষ কন্টেন্ট রেন্ডার করতে পারেন।

এখানে if.bind এবং repeat.for কম্পোনেন্টস নিয়ে আলোচনা করা হবে, যা Aurelia এর ডেটা বাইন্ডিং মেকানিজমে গুরুত্বপূর্ণ ভূমিকা রাখে।

১. Conditionals (if.bind)

Aurelia তে if.bind ডিরেকটিভটি ব্যবহার করে আপনি শর্তসাপেক্ষভাবে কোনো কন্টেন্ট বা HTML উপাদান প্রদর্শন করতে পারেন। এটি একটি boolean অভিব্যক্তি যাচাই করে এবং শর্ত পূর্ণ হলে কন্টেন্ট রেন্ডার করে।

উদাহরণ: if.bind ব্যবহার

<template>
  <button click.delegate="toggleMessage()">Toggle Message</button>

  <!-- if.bind: শর্তের ভিত্তিতে message div টি প্রদর্শন বা скрыুন -->
  <div if.bind="showMessage">
    <p>The message is visible!</p>
  </div>
</template>

// app.js
export class App {
  showMessage = false;

  toggleMessage() {
    this.showMessage = !this.showMessage;  // value toggle করা হচ্ছে
  }
}

কিভাবে এটি কাজ করে:

1. প্রথমে showMessage প্রপার্টি false সেট করা হয়েছে, অর্থাৎ message দেখানো হবে না।
2. যখন বাটনে ক্লিক করা হয়, toggleMessage() ফাংশন কল হয় এবং showMessage প্রপার্টি পরিবর্তিত হয়।
3. যখন showMessage true হয়, তখন <div> ট্যাগটি রেন্ডার হবে এবং "The message is visible!" প্রদর্শিত হবে।
4. যখন showMessage false হয়, <div> ট্যাগটি আর রেন্ডার হবে না।

এভাবে, if.bind শর্তসাপেক্ষভাবে UI উপাদানগুলো প্রদর্শন বা লুকিয়ে রাখতে ব্যবহৃত হয়।

২. Repeaters (repeat.for)

repeat.for ডিরেকটিভটি ডেটা তালিকা বা অ্যারের মধ্যে পুনরাবৃত্তি করতে ব্যবহৃত হয়। এটি একটি ফ্রন্ট-এন্ড ডাইনামিক তালিকা তৈরি করতে সাহায্য করে, যা একটি কন্টেইনারে একাধিক উপাদান রেন্ডার করে।

উদাহরণ: repeat.for ব্যবহার

<template>
  <ul>
    <!-- repeat.for: এই লুপের মাধ্যমে fruits অ্যারে থেকে প্রতিটি ফলের নাম প্রদর্শন হবে -->
    <li repeat.for="fruit of fruits">${fruit}</li>
  </ul>
</template>

// app.js
export class App {
  fruits = ['Apple', 'Banana', 'Orange', 'Mango']; // ডেটার অ্যারে
}

কিভাবে এটি কাজ করে:

1. এখানে fruits নামে একটি অ্যারে রয়েছে, যা কিছু ফলের নাম ধারণ করে।
2. repeat.for="fruit of fruits" নির্দেশনা অনুযায়ী, fruits অ্যারের প্রতিটি উপাদানের জন্য একটি <li> ট্যাগ তৈরি হবে।
3. প্রতিটি <li> ট্যাগে fruit অ্যারের মান (যেমন, "Apple", "Banana" ইত্যাদি) প্রদর্শিত হবে।

এভাবে, repeat.for ডিরেকটিভ ব্যবহার করে ডেটার তালিকা বা অ্যারের মধ্যে পুনরাবৃত্তি করা যায় এবং ডাইনামিকভাবে HTML উপাদান তৈরি করা যায়।

৩. if.bind এবং repeat.for একসাথে ব্যবহার করা

if.bind এবং repeat.for ডিরেকটিভস একসাথে ব্যবহার করে আপনি তালিকা বা কন্টেন্ট প্রদর্শনের জন্য শর্তযুক্ত লজিক প্রয়োগ করতে পারেন।

উদাহরণ: if.bind এবং repeat.for একসাথে ব্যবহার

<template>
  <button click.delegate="toggleList()">Toggle Fruits List</button>

  <div if.bind="showList">
    <ul>
      <li repeat.for="fruit of fruits">${fruit}</li>
    </ul>
  </div>
</template>

// app.js
export class App {
  fruits = ['Apple', 'Banana', 'Orange', 'Mango'];  // ডেটা
  showList = false;

  toggleList() {
    this.showList = !this.showList;  // fruits তালিকা দেখানোর জন্য toggle
  }
}

কিভাবে এটি কাজ করে:

1. প্রথমে showList প্রপার্টি false এ সেট করা হয়েছে, তাই তালিকা লুকানো থাকবে।
2. toggleList() মেথড কল হলে showList পরিবর্তিত হবে এবং ফলস্বরূপ তালিকা <ul> শো হবে।
3. repeat.for="fruit of fruits" ডিরেকটিভটি fruits অ্যারের প্রতি আইটেমের জন্য একটি <li> ট্যাগ রেন্ডার করবে, যেখানে ফলের নাম প্রদর্শিত হবে।

এভাবে, if.bind এবং repeat.for একসাথে ব্যবহার করে একটি শর্তাধীন এবং ডাইনামিক তালিকা তৈরি করা সম্ভব।

উপসংহার

Aurelia ফ্রেমওয়ার্কে Repeaters (যেমন repeat.for) এবং Conditionals (যেমন if.bind) ব্যবহারের মাধ্যমে ডাইনামিক এবং ইন্টারঅ্যাকটিভ UI তৈরি করা সহজ হয়। এগুলি আপনাকে বিভিন্ন ধরনের ডেটা শর্তসাপেক্ষভাবে রেন্ডার বা পুনরাবৃত্তি করতে সাহায্য করে। ডেটা বাইন্ডিং এবং ডাইনামিক লিস্ট তৈরির জন্য এই ফিচারগুলি অত্যন্ত কার্যকরী।