কাস্টম ইভেন্ট তৈরি এবং ডিসপ্যাচ করা

Aurelia একটি ইভেন্ট-ভিত্তিক ফ্রেমওয়ার্ক যা DOM ইভেন্ট এবং কাস্টম ইভেন্ট উভয়কেই সাপোর্ট করে। কাস্টম ইভেন্টগুলি তৈরি করা এবং ডিসপ্যাচ (trigger) করা খুবই সহজ, এবং এগুলো ডেটা অথবা অ্যাকশন শেয়ার করার জন্য অন্যান্য কম্পোনেন্ট বা মডিউলের মধ্যে যোগাযোগের এক কার্যকর উপায়। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Aurelia-তে কাস্টম ইভেন্ট তৈরি এবং ডিসপ্যাচ করা যায়।

১. কাস্টম ইভেন্ট তৈরি করা

Aurelia-তে কাস্টম ইভেন্ট তৈরি করতে সাধারণত DOM Event এর মতোই Event কন্সট্রাক্টর ব্যবহার করা হয়। তবে, কাস্টম ইভেন্টে আপনি আপনার প্রয়োজনীয় ডেটা পাস করতে পারেন।

উদাহরণ: একটি কাস্টম ইভেন্ট তৈরি করা

export class App {
  constructor() {
    this.message = 'Hello from Aurelia!';
  }

  triggerCustomEvent() {
    const event = new CustomEvent('myCustomEvent', {
      bubbles: true,           // এই ইভেন্টটি বব্লিং করবে
      cancelable: true,        // ইভেন্টটি ক্যানসেল করা যাবে
      detail: { message: this.message }  // ইভেন্টের সাথে ডেটা পাস করা হচ্ছে
    });

    this.element.dispatchEvent(event);  // ইভেন্টটি ডিসপ্যাচ করা হচ্ছে
  }
}

এখানে:

• new CustomEvent দিয়ে একটি নতুন কাস্টম ইভেন্ট তৈরি করা হয়েছে।
• bubbles প্যারামিটারটি ইভেন্টের বব্লিং (propagation) সক্ষম করে।
• cancelable প্যারামিটারটি ইভেন্টটি ক্যানসেল করার সুযোগ দেয়।
• detail প্যারামিটারটি ইভেন্টের সাথে যে ডেটা পাঠানো হবে তা নির্ধারণ করে (এখানে একটি message পাস করা হয়েছে)।

এটি triggerCustomEvent() ফাংশনের মাধ্যমে ইভেন্টটি ডিসপ্যাচ করে।

২. কাস্টম ইভেন্টে ডেটা পাঠানো

Aurelia কাস্টম ইভেন্টের মাধ্যমে ডেটা পাঠানোর জন্য detail প্যারামিটারটি ব্যবহার করা হয়। এর মাধ্যমে, আপনি ইভেন্টের সাথে একটি অবজেক্ট, অ্যারে বা যেকোনো ডেটা পাস করতে পারেন।

উদাহরণ: কাস্টম ইভেন্টের মাধ্যমে ডেটা পাঠানো

export class App {
  constructor() {
    this.message = 'Hello from Aurelia!';
  }

  triggerCustomEvent() {
    const event = new CustomEvent('messageEvent', {
      bubbles: true,
      cancelable: true,
      detail: { message: this.message }
    });

    this.element.dispatchEvent(event);
  }
}

এখানে detail প্যারামিটার ব্যবহার করে message ডেটা পাঠানো হয়েছে, যা অন্য কম্পোনেন্ট বা ইভেন্ট লিসেনারের মাধ্যমে এক্সেস করা যাবে।

৩. কাস্টম ইভেন্ট লিসেনিং

কাস্টম ইভেন্ট ডিসপ্যাচ করার পর, আপনাকে সেই ইভেন্টটি শোনার জন্য (listen) একটি event listener সেট করতে হবে, যা ইভেন্টটি শোনা এবং প্রক্রিয়া করবে। Aurelia-তে, আপনি এটি সহজে করতে পারেন।

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

<template>
  <button click.delegate="triggerCustomEvent()">Trigger Event</button>
  <p>${eventMessage}</p>
</template>

<script>
export class App {
  constructor() {
    this.eventMessage = '';
  }

  attached() {
    // কাস্টম ইভেন্ট 'messageEvent' শোনার জন্য event listener যোগ করা হচ্ছে
    this.element.addEventListener('messageEvent', (event) => {
      this.eventMessage = event.detail.message;  // ইভেন্টের সাথে প্রাপ্ত ডেটা ব্যবহার
    });
  }

  triggerCustomEvent() {
    const event = new CustomEvent('messageEvent', {
      bubbles: true,
      cancelable: true,
      detail: { message: 'Hello from Aurelia Event!' }
    });

    this.element.dispatchEvent(event); // ইভেন্টটি ডিসপ্যাচ করা হচ্ছে
  }
}
</script>

এখানে:

• attached() লাইফসাইকেল হুক ব্যবহার করা হয়েছে যাতে messageEvent ইভেন্টটি শোনা শুরু হয় যখন কম্পোনেন্ট DOM-এ অ্যাটাচড হয়।
• addEventListener() ব্যবহার করে কাস্টম ইভেন্ট messageEvent শোনা হচ্ছে এবং ইভেন্টের ডেটা event.detail.message দিয়ে অ্যাক্সেস করা হচ্ছে।

এটি কাস্টম ইভেন্ট ডিসপ্যাচ করার পর, ইভেন্টের ডেটা অ্যাক্সেস করে UI তে দেখাবে।

৪. Aurelia-তে কাস্টম ইভেন্ট ডিরেকটিভ ব্যবহার করা

Aurelia আপনাকে কাস্টম ইভেন্ট ডিসপ্যাচ এবং লিসেন করার জন্য Aurelia event delegation এর সুবিধা দেয়। আপনি এটি click.delegate বা trigger.delegate ইত্যাদি ডিরেকটিভ ব্যবহার করে সহজেই করতে পারেন।

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

<template>
  <button click.delegate="triggerCustomEvent()">Trigger Event</button>
  <p>${eventMessage}</p>
</template>

<script>
export class App {
  constructor() {
    this.eventMessage = '';
  }

  triggerCustomEvent() {
    const event = new CustomEvent('messageEvent', {
      bubbles: true,
      cancelable: true,
      detail: { message: 'Hello from Aurelia!' }
    });

    this.element.dispatchEvent(event); // ইভেন্টটি ডিসপ্যাচ করা হচ্ছে
  }

  attached() {
    this.element.addEventListener('messageEvent', (event) => {
      this.eventMessage = event.detail.message;
    });
  }
}
</script>

এখানে, click.delegate ডিরেকটিভ ব্যবহার করে কাস্টম ইভেন্ট ট্রিগার করা হচ্ছে। এটি আপনাকে ফাংশন কল করতে সাহায্য করে যখন একটি DOM ইভেন্ট (যেমন, ক্লিক) ঘটে।

উপসংহার

Aurelia-তে কাস্টম ইভেন্ট তৈরি এবং ডিসপ্যাচ করা খুবই সহজ এবং সুবিধাজনক। CustomEvent এর মাধ্যমে আপনি কাস্টম ইভেন্ট তৈরি করতে পারেন এবং detail প্যারামিটার ব্যবহার করে ডেটা পাস করতে পারেন। এছাড়া, addEventListener() ব্যবহার করে ইভেন্ট শোনা এবং ডেটা প্রক্রিয়া করা যায়। এর মাধ্যমে, আপনি সহজে বিভিন্ন কম্পোনেন্ট বা ভিউগুলোর মধ্যে যোগাযোগ এবং তথ্য শেয়ার করতে পারবেন।