লিস্ট আইটেমের মধ্যে কাস্টম ইভেন্ট হ্যান্ডল করা

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

এখানে একটি উদাহরণ দেওয়া হলো যেখানে একটি লিস্টের মধ্যে কাস্টম ইভেন্ট হ্যান্ডল করা হচ্ছে। আমরা একটি লিস্ট তৈরি করব, যেখানে প্রতিটি আইটেমের জন্য একটি কাস্টম ইভেন্ট হ্যান্ডল করা হবে।

উদাহরণ: লিস্ট আইটেমের মধ্যে কাস্টম ইভেন্ট হ্যান্ডল করা

১. কম্পোনেন্ট তৈরি করুন (ListComponent.riot)

<!-- ListComponent.riot -->
<list-component>
  <h2>Items List</h2>
  <ul>
    <li each={item in items} onclick={handleItemClick(item)}>
      {item.name}
    </li>
  </ul>

  <script>
    export default {
      onMounted() {
        // লিস্টের আইটেম ইনিশিয়ালাইজ করা
        this.items = [
          { name: 'Item 1', description: 'This is item 1' },
          { name: 'Item 2', description: 'This is item 2' },
          { name: 'Item 3', description: 'This is item 3' }
        ];
      },

      handleItemClick(item) {
        // কাস্টম ইভেন্ট ট্রিগার করা
        this.trigger('itemClicked', item);
      }
    }
  </script>
</list-component>

ব্যাখ্যা:

• HTML: এখানে each ডিরেকটিভ ব্যবহার করা হয়েছে যা items অ্যারে থেকে প্রতিটি আইটেম রেন্ডার করবে।
• কাস্টম ইভেন্ট: handleItemClick ফাংশনটি ক্লিক হওয়ার পর কাস্টম ইভেন্ট 'itemClicked' ট্রিগার করে এবং সংশ্লিষ্ট item ডেটা পাস করে।

২. অন্য কম্পোনেন্টে কাস্টম ইভেন্ট শোনা (ParentComponent.riot)

<!-- ParentComponent.riot -->
<parent-component>
  <list-component></list-component>
  <h3>Selected Item: {selectedItem.name}</h3>

  <script>
    export default {
      onMounted() {
        // 'itemClicked' ইভেন্ট শোনা
        this.on('itemClicked', (item) => {
          this.selectedItem = item;
        });
      }
    }
  </script>
</parent-component>

ব্যাখ্যা:

• এখানে ParentComponent কম্পোনেন্টে 'itemClicked' ইভেন্ট শোনা হচ্ছে এবং যখন কোনো আইটেম ক্লিক হবে, তখন selectedItem সেট করা হবে।
• এটি প্রমাণ করে যে কাস্টম ইভেন্টের মাধ্যমে এক কম্পোনেন্ট থেকে আরেক কম্পোনেন্টে ডেটা বা ইনফরমেশন প্রেরণ করা হচ্ছে।

কাস্টম ইভেন্ট এবং লিস্ট আইটেমের মধ্যে আরও ইন্টারঅ্যাকশন

আপনি লিস্ট আইটেমের মধ্যে বিভিন্ন ইভেন্ট তৈরি করতে পারেন। যেমন, একটি আইটেমের জন্য একটি ডিলিট বাটন তৈরি করা, যেখানে সেই বাটনে ক্লিক করলে একটি কাস্টম ইভেন্ট ট্রিগার হবে এবং আইটেমটি লিস্ট থেকে বাদ দেওয়া হবে।

উদাহরণ: ডিলিট বাটন এবং কাস্টম ইভেন্ট

<!-- ListComponent.riot -->
<list-component>
  <h2>Items List</h2>
  <ul>
    <li each={item in items}>
      {item.name}
      <button onclick={deleteItem(item)}>Delete</button>
    </li>
  </ul>

  <script>
    export default {
      onMounted() {
        this.items = [
          { name: 'Item 1' },
          { name: 'Item 2' },
          { name: 'Item 3' }
        ];
      },

      deleteItem(item) {
        // কাস্টম ইভেন্ট ট্রিগার করা যখন একটি আইটেম ডিলিট হবে
        this.trigger('itemDeleted', item);
      }
    }
  </script>
</list-component>

এখন, ParentComponent থেকে এই ইভেন্টটি শোনা হবে:

<!-- ParentComponent.riot -->
<parent-component>
  <list-component></list-component>
  <h3>Deleted Item: {deletedItem.name}</h3>

  <script>
    export default {
      onMounted() {
        // 'itemDeleted' ইভেন্ট শোনা
        this.on('itemDeleted', (item) => {
          this.deletedItem = item;
        });
      }
    }
  </script>
</parent-component>

এখানে:

• একটি ডিলিট বাটন তৈরি করা হয়েছে প্রতিটি আইটেমের জন্য।
• যখন বাটনে ক্লিক হবে, তখন 'itemDeleted' কাস্টম ইভেন্ট ট্রিগার হবে এবং ডিলিট হওয়া আইটেমটি deletedItem হিসেবে ParentComponent-এ পাঠানো হবে।

Riot.js-এ লিস্ট আইটেমের মধ্যে কাস্টম ইভেন্ট হ্যান্ডল করা খুবই সহজ এবং কার্যকরী। আপনি this.trigger() ব্যবহার করে কাস্টম ইভেন্ট ট্রিগার করতে পারেন এবং this.on() দিয়ে সেই ইভেন্টগুলো শোনার মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং রিয়েকটিভ করতে পারেন। এটি আপনাকে ডায়নামিক এবং ব্যবহারকারী ভিত্তিক ওয়েব অ্যাপ্লিকেশন তৈরিতে সহায়তা করবে, যেখানে প্রতিটি আইটেমের জন্য আলাদা আলাদা কার্যকলাপ ট্রিগার করা সম্ভব।