Component Lifecycle Hooks এবং Events

Web Development - এমবারজেএস (EmberJS) - Ember.js Component

206

Ember.js-এ Component হল UI উপাদান যা পুনঃব্যবহারযোগ্য এবং মডুলার কোড তৈরিতে ব্যবহৃত হয়। Components Ember.js-এ UI-এর অংশ হিসেবে কাজ করে এবং এগুলি মূলত ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে পরিবর্তিত হয়।

Ember.js-এর Component Lifecycle Hooks এবং Events দুইটি গুরুত্বপূর্ণ ধারণা, যা কম্পোনেন্টের আচরণ এবং কার্যকারিতা নিয়ন্ত্রণ করে। এই Hooks এবং Events ব্যবহার করে, ডেভেলপাররা কম্পোনেন্টের জীবনচক্র পরিচালনা এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের সাথে কার্যকরভাবে কাজ করতে পারে।

Ember.js Component Lifecycle Hooks

Lifecycle Hooks কম্পোনেন্টের জীবনচক্রের বিভিন্ন পর্যায়ে ব্যবহৃত হয়, যেমন ইনিশিয়ালাইজেশন, রেন্ডারিং, আপডেট এবং ডেস্ট্রাকশন।

এমবারজেএস কম্পোনেন্টের জন্য কিছু গুরুত্বপূর্ণ lifecycle hooks নিম্নরূপ:

১. `init()`

অর্থ: এটি কম্পোনেন্টের ইনিশিয়ালাইজেশন পর্যায়ে কল হয়। এটি কম্পোনেন্ট তৈরি হওয়ার পর প্রথম কল হয়।
ব্যবহার: প্রাথমিক অবস্থায় ডেটা সেট করা বা কোনো প্রাথমিক লজিক কার্যকর করার জন্য ব্যবহার করা হয়।

import Component from '@ember/component';

export default class MyComponent extends Component {
  init() {
    super.init(...arguments);
    console.log('Component is initialized');
    this.set('message', 'Hello, Ember!');
  }
}

২. `didInsertElement()`

অর্থ: এটি যখন কম্পোনেন্ট প্রথমবার DOM-এ রেন্ডার হয়ে চলে আসে তখন কল হয়।
ব্যবহার: DOM-এ রেন্ডার হওয়ার পরে DOM অপারেশন বা তৃতীয় পক্ষের লাইব্রেরি (যেমন, জাভাস্ক্রিপ্ট প্লাগইন বা ইউআই লাইব্রেরি) ব্যবহার করতে হবে।

didInsertElement() {
  this._super(...arguments);
  console.log('Component inserted into DOM');
}

৩. `willDestroyElement()`

অর্থ: এটি কম্পোনেন্ট DOM থেকে সরানোর আগে কল হয়।
ব্যবহার: কম্পোনেন্ট পরিষ্কার বা রিসোর্স ফ্রি করার জন্য ব্যবহৃত হয়, যেমন ইভেন্ট লিসেনার রিমুভ করা বা অন্য কোনো এক্সটার্নাল রিসোর্স মুক্ত করা।

willDestroyElement() {
  this._super(...arguments);
  console.log('Component will be destroyed');
}

৪. `didUpdateAttrs()`

অর্থ: এটি যখন কম্পোনেন্টের attributes পরিবর্তন হয় তখন কল হয়।
ব্যবহার: প্রপস বা অ্যাট্রিবিউট পরিবর্তিত হলে ডেটা বা UI আপডেট করার জন্য ব্যবহৃত হয়।

didUpdateAttrs() {
  console.log('Attributes updated');
  this._super(...arguments);
}

৫. `willDestroy()`

অর্থ: এটি কম্পোনেন্ট সম্পূর্ণভাবে ধ্বংস হওয়ার আগে কল হয়।
ব্যবহার: অবজেক্টগুলি বা অ্যাট্রিবিউটগুলি ম্যানুয়ালি পরিষ্কার করতে ব্যবহার করা যেতে পারে।

willDestroy() {
  console.log('Component is about to be destroyed');
  this._super(...arguments);
}

Ember.js Component Events

Events ব্যবহারকারী ইন্টারঅ্যাকশন এবং কম্পোনেন্টের আচরণ পরিচালনার জন্য ব্যবহৃত হয়। Ember.js-এ events প্রধানত action আকারে ব্যবহৃত হয় এবং এগুলি কম্পোনেন্টের মধ্যে বা controller-এ হ্যান্ডল করা যায়।

১. Event Binding:

Ember.js-এ আপনি কম্পোনেন্টে ইভেন্ট ব্যবহারকারীর অ্যাকশনের জন্য action এর মাধ্যমে হ্যান্ডেল করতে পারেন। ইভেন্টের জন্য {{action}} হেল্পার ব্যবহৃত হয়।

<button {{action "handleClick"}}>Click Me</button>

এখানে, যখন ব্যবহারকারী বাটনে ক্লিক করবে, তখন handleClick অ্যাকশন কল হবে।

২. Action Handler in Component:

action গুলি কম্পোনেন্টের মধ্যে actions অবজেক্টের মাধ্যমে হ্যান্ডেল করা হয়।

import Component from '@ember/component';

export default class MyComponent extends Component {
  actions: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}

এখানে handleClick অ্যাকশনটি {{action}} হেল্পারের মাধ্যমে বাটন ক্লিকের সময় কল হয়।

৩. Event Handling in Controller:

আপনি কম্পোনেন্টের action গুলিকে controller-এও পাঠাতে পারেন। উদাহরণস্বরূপ:

// app/controllers/application.js
import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  actions: {
    handleClick() {
      alert('Button clicked from controller!');
    }
  }
}

এটি HTML টেমপ্লেটের মাধ্যমে controller-এ ইভেন্ট পাঠানোর একটি উদাহরণ।

৪. Preventing Default Behavior:

Ember.js-এ আপনি preventDefault() ব্যবহার করতে পারেন যাতে ডিফল্ট ইভেন্ট আচরণ বন্ধ হয়।

import Component from '@ember/component';

export default class MyComponent extends Component {
  actions: {
    handleSubmit(event) {
      event.preventDefault();
      console.log('Form submission prevented');
    }
  }
}

এখানে, handleSubmit অ্যাকশনটি ফর্ম সাবমিশনকে প্রিভেন্ট করবে।

৫. Bubble Events:

এটি কম্পোনেন্ট থেকে একটি ইভেন্ট প্যারেন্ট কম্পোনেন্ট বা কন্ট্রোলারে প্রপাগেট করা হতে পারে।

import Component from '@ember/component';

export default class ChildComponent extends Component {
  actions: {
    notifyParent() {
      this.sendAction('onNotify');
    }
  }
}

এখানে, notifyParent অ্যাকশনটি প্যারেন্ট কম্পোনেন্ট বা কন্ট্রোলারে প্রপাগেট হবে যদি onNotify নামক অ্যাকশন প্যারেন্ট কম্পোনেন্টে হ্যান্ডেল করা থাকে।