Observers হল Ember.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ডেটার উপর নির্ভরশীলতা তৈরি করে এবং যখন সেই ডেটার মান পরিবর্তিত হয়, তখন নির্দিষ্ট ফাংশন বা লজিক ট্রিগার করে। এটা মূলত ডেটা চেঞ্জ ডিটেকশন এবং অটোমেটিক অ্যাকশন পরিচালনার জন্য ব্যবহৃত হয়। Ember.js এ observers আপনাকে ডেটার পরিবর্তন ট্র্যাক করতে এবং সেই অনুযায়ী কার্যক্রম সম্পাদন করতে সহায়তা করে।
Observers কী?
Ember.js-এ Observers এমন একটি ফাংশন বা মেথড যা নির্দিষ্ট প্রপার্টি বা ডেটার মান পরিবর্তিত হলে ট্রিগার হয়। আপনি যখন একটি নির্দিষ্ট প্রপার্টির মান পরিবর্তন করেন, তখন Observer সেই পরিবর্তনটি সনাক্ত করে এবং নিজের কাজ করে। এটি সাধারণত getter/setter মডেল বা অ্যাপ্লিকেশনের অবস্থার মধ্যে পরিবর্তন ট্র্যাক করার জন্য ব্যবহৃত হয়।
Ember.js-এ Observer তৈরি করা
Ember.js-এ Observer তৈরি করতে Ember.Object অথবা @tracked ব্যবহার করা যেতে পারে, তবে @tracked Ember 3.12 এবং তার পরবর্তী সংস্করণে ইমপ্লিমেন্ট করা হয়েছে এবং এটি বেশিরভাগ ক্ষেত্রে ব্যবহার করা হয়। কিন্তু পুরানো Ember সংস্করণে, আমরা Ember.Object এবং addObserver ব্যবহার করতাম।
এখানে আমরা Ember.js-এ Observer তৈরি করার পদ্ধতি দেখাবো।
১. Basic Observer Example
ধরা যাক আমাদের একটি কন্ট্রোলার রয়েছে এবং আমরা চাই যে যখন কোনো প্রপার্টির মান পরিবর্তিত হবে, তখন একটি বিশেষ ফাংশন বা লজিক কার্যকর হবে। এর জন্য আমরা Observer তৈরি করতে পারি।
Example: Observer using Ember.Object (Old Syntax)
// app/controllers/application.js
import Controller from '@ember/controller';
import { observer } from '@ember/object';
export default class ApplicationController extends Controller {
firstName = 'John';
lastName = 'Doe';
// Observer to watch the changes in 'firstName'
fullNameObserver = observer('firstName', function() {
this.set('fullName', `${this.firstName} ${this.lastName}`);
});
// Method to change 'firstName' dynamically
changeFirstName() {
this.set('firstName', 'Jane');
}
}
এখানে, firstName প্রপার্টির উপর একটি Observer তৈরি করা হয়েছে। যখনই firstName পরিবর্তিত হবে, তখন fullNameObserver মেথডটি কল হবে এবং fullName প্রপার্টি আপডেট হবে।
Example: Observer in the Template
<!-- app/templates/application.hbs -->
<h1>Full Name: {{fullName}}</h1>
<button {{on "click" this.changeFirstName}}>Change First Name</button>
এখানে, যখন আপনি বাটনে ক্লিক করবেন, firstName পরিবর্তিত হবে এবং fullNameObserver সেই পরিবর্তন ট্র্যাক করবে এবং fullName আপডেট হবে।
২. Observer using @tracked (New Syntax)
Ember 3.12 থেকে @tracked ডেকোরেটর চালু করা হয়েছে, যা Observer এর মত কাজ করে কিন্তু সিঙ্কট্যাক্স আরও সহজ এবং পরিষ্কার। @tracked দিয়ে যখন কোনো প্রপার্টি পরিবর্তিত হয়, তখন স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার হয়।
Example: Using @tracked
// app/controllers/application.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
export default class ApplicationController extends Controller {
@tracked firstName = 'John';
@tracked lastName = 'Doe';
@tracked fullName = `${this.firstName} ${this.lastName}`;
changeFirstName() {
this.firstName = 'Jane'; // Will automatically update fullName
}
}
এখানে, @tracked ব্যবহার করে firstName, lastName, এবং fullName এর মান ট্র্যাক করা হচ্ছে। firstName পরিবর্তিত হলে, fullName স্বয়ংক্রিয়ভাবে আপডেট হবে কারণ @tracked ডেটার উপর নির্ভরশীলতা তৈরি করে।
Example: Template
<!-- app/templates/application.hbs -->
<h1>Full Name: {{this.fullName}}</h1>
<button {{on "click" this.changeFirstName}}>Change First Name</button>
এখানে, বাটনে ক্লিক করলে firstName পরিবর্তিত হবে এবং fullName স্বয়ংক্রিয়ভাবে আপডেট হবে।
৩. Multiple Observers
একই ডেটার উপর একাধিক Observer তৈরি করা সম্ভব। আপনি যেকোনো প্রপার্টির উপর একাধিক observer যুক্ত করতে পারেন।
Example: Multiple Observers
// app/controllers/application.js
import Controller from '@ember/controller';
import { observer } from '@ember/object';
export default class ApplicationController extends Controller {
firstName = 'John';
lastName = 'Doe';
fullName = `${this.firstName} ${this.lastName}`;
// Observer for firstName
firstNameObserver = observer('firstName', function() {
this.set('fullName', `${this.firstName} ${this.lastName}`);
});
// Observer for lastName
lastNameObserver = observer('lastName', function() {
this.set('fullName', `${this.firstName} ${this.lastName}`);
});
changeNames() {
this.set('firstName', 'Jane');
this.set('lastName', 'Smith');
}
}
এখানে দুটি Observer firstName এবং lastName এর পরিবর্তন ট্র্যাক করছে, এবং fullName আপডেট হচ্ছে।
৪. Observer Performance Considerations
- Observers যখন ব্যবহার করা হয়, এটি স্বয়ংক্রিয়ভাবে সিঙ্কট্যাক্স এবং পারফরম্যান্স সমস্যার সৃষ্টি করতে পারে, বিশেষ করে যখন এটি অত্যধিক ব্যবহার করা হয়। Ember 3.12 এর পর
@trackedডেকোরেটর বেশি কার্যকর এবং পারফরম্যান্সের জন্য ভালো। - Observers সাধারণত UI আপডেট করতে ব্যবহার করা হয়, তবে অনেক বার এগুলি অতিরিক্ত পারফরম্যান্স ঝুঁকি সৃষ্টি করতে পারে, তাই এগুলি কেবল তখনই ব্যবহার করা উচিত যখন এটি প্রয়োজনীয়।
Ember.js-এ Observers আপনাকে ডেটার পরিবর্তন ট্র্যাক করার মাধ্যমে আপনার অ্যাপ্লিকেশনের UI এবং লজিককে স্বয়ংক্রিয়ভাবে আপডেট করতে সাহায্য করে। যদিও @tracked ডেকোরেটর Ember 3.12 থেকে আরও কার্যকর এবং উন্নত পদ্ধতি, তবুও Observers এখনও পুরানো সংস্করণে ব্যবহার করা হয়। Observer গুলি অত্যন্ত শক্তিশালী, তবে এগুলি সাবধানে ব্যবহার করা উচিত, বিশেষত বড় অ্যাপ্লিকেশন এবং পারফরম্যান্সের দিক থেকে।
Read more
