RIOT.js এ লুপ পরিচালনা করা

Riot.js-এ লুপ পরিচালনা খুবই সহজ এবং সরল। আপনি লুপ পরিচালনা করতে each ডিরেকটিভ ব্যবহার করতে পারেন, যা আপনাকে একটি অ্যারে বা অবজেক্টের মাধ্যমে পুনরাবৃত্তি (loop) করতে সাহায্য করে। এটি আপনাকে ডাইনামিকভাবে এলিমেন্টগুলি তৈরি করতে দেয় এবং যখন ডেটা পরিবর্তন হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়।

Riot.js-এ লুপ পরিচালনার মূল ধারণা:

1. each ডিরেকটিভ:
   • Riot.js-এ each ডিরেকটিভ একটি অ্যারে বা অবজেক্টের উপর লুপ চালাতে ব্যবহৃত হয়।
   • এটি একটি এক্সপ্রেশন যা একটি তালিকা বা অ্যারের প্রতিটি আইটেমের জন্য একটি HTML উপাদান তৈরি করে।
   • each ডিরেকটিভ ব্যবহার করার সময়, আপনি একটি আইটেম এবং তার ইনডেক্স বা কী (যদি অবজেক্ট থাকে) অ্যাক্সেস করতে পারবেন।
2. ডাটা বাইন্ডিং:
   • Riot.js-এ ডাটা বাইন্ডিং সাপোর্ট করার কারণে, যখন লুপ করা ডেটা পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে রেন্ডার হয় এবং নতুন ডেটা প্রদর্শন করা হয়।

লুপ পরিচালনার উদাহরণ:

নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি অ্যারে এর উপাদানগুলোর উপর লুপ চালানো হচ্ছে এবং তাদের UI তে প্রদর্শন করা হচ্ছে।

<!-- ItemList.riot -->
<item-list>
  <ul>
    <li each={item in items}>{item}</li>
  </ul>

  <script>
    export default {
      onMounted() {
        this.items = ['Apple', 'Banana', 'Orange', 'Mango'];
      }
    }
  </script>
</item-list>

এখানে:

• <li each={item in items}>{item}</li>: এটি items অ্যারের প্রতিটি আইটেমের জন্য একটি <li> এলিমেন্ট তৈরি করবে এবং আইটেমটি সেখানে প্রদর্শন করবে।
• this.items = ['Apple', 'Banana', 'Orange', 'Mango'];: items অ্যারেটি onMounted লাইফসাইকেল হুকে সেট করা হয়েছে।

আরও উন্নত উদাহরণ (অবজেক্টের উপর লুপ চালানো):

এখন আমরা একটি অবজেক্টের উপর লুপ চালানোর উদাহরণ দেখব যেখানে অ্যারেতে অবজেক্টের মানগুলো বের করা হবে।

<!-- EmployeeList.riot -->
<employee-list>
  <ul>
    <li each={employee in employees}>
      {employee.name} - {employee.position}
    </li>
  </ul>

  <script>
    export default {
      onMounted() {
        this.employees = [
          { name: 'John Doe', position: 'Software Engineer' },
          { name: 'Jane Smith', position: 'Project Manager' },
          { name: 'Alex Johnson', position: 'UX Designer' }
        ];
      }
    }
  </script>
</employee-list>

এখানে:

• each={employee in employees}: এটি employees অ্যারের প্রতিটি অবজেক্টের জন্য লুপ করবে এবং প্রত্যেকটি অবজেক্টের name এবং position প্রপার্টি UI তে দেখাবে।

each ডিরেকটিভের আরও বৈশিষ্ট্য:

1. আইটেমের ইনডেক্স/কী: আপনি যদি অবজেক্টের আইটেমের ইনডেক্স বা কী দেখতে চান, তাহলে আপনি এটি each ডিরেকটিভে এইভাবে অ্যাক্সেস করতে পারেন:

<!-- ItemListWithIndex.riot -->
<item-list-with-index>
  <ul>
    <li each={item, index in items}>{index + 1}. {item}</li>
  </ul>

  <script>
    export default {
      onMounted() {
        this.items = ['Apple', 'Banana', 'Orange', 'Mango'];
      }
    }
  </script>
</item-list-with-index>

এখানে:

• {index + 1}: এটি আইটেমের ইনডেক্স প্রদর্শন করবে, যাতে আপনি দেখতে পারবেন প্রতি আইটেমের সিরিয়াল নম্বর।

2. কী ব্যবহার করা (অবজেক্টের জন্য): যখন আপনি একটি অবজেক্টের উপর লুপ করবেন, তখন আপনি key ব্যবহার করতে পারেন যাতে আপনাকে অনন্য আইডেন্টিফায়ার দেওয়া যায়:

<!-- ObjectKeyExample.riot -->
<object-key-example>
  <ul>
    <li each={value, key in items}>
      {key}: {value.name} - {value.position}
    </li>
  </ul>

  <script>
    export default {
      onMounted() {
        this.items = {
          emp1: { name: 'John', position: 'Engineer' },
          emp2: { name: 'Jane', position: 'Manager' },
          emp3: { name: 'Alex', position: 'Designer' }
        };
      }
    }
  </script>
</object-key-example>

এখানে:

• each={value, key in items}: এটি items অবজেক্টের প্রতিটি কী-value পেয়ার লুপ করবে, যেখানে key হল অবজেক্টের কী এবং value হল অবজেক্টের মান (যেমন, কর্মচারীর নাম এবং পদবী)।

সর্বশেষ টিপস:

• ডাটা পরিবর্তন: যেহেতু Riot.js রিয়েকটিভ ডাটা বাইন্ডিং সাপোর্ট করে, ডেটার পরিবর্তন UI তে স্বয়ংক্রিয়ভাবে প্রতিফলিত হবে। উদাহরণস্বরূপ, যদি items অ্যারের মধ্যে নতুন আইটেম যোগ করা হয়, তবে UI তে তা স্বয়ংক্রিয়ভাবে দেখা যাবে।
• key অ্যাট্রিবিউট: কখনও কখনও লুপের আইটেমের জন্য key অ্যাট্রিবিউট ব্যবহার করা প্রয়োজন হতে পারে, বিশেষত যখন আপনি কম্পোনেন্টের ভিতরে অনেক ডাইনামিক আইটেম দেখাচ্ছেন।

Riot.js-এ লুপ পরিচালনা অত্যন্ত সহজ এবং ডাটা বাইন্ডিং এর মাধ্যমে আপনি খুব দ্রুত এবং দক্ষভাবে ডাইনামিক UI তৈরি করতে পারবেন। আপনি each ডিরেকটিভ ব্যবহার করে অ্যারে বা অবজেক্টের উপর লুপ চালাতে পারেন, এবং যখন ডেটা পরিবর্তিত হয় তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়।