Component এর মধ্যে Properties এবং Actions ব্যবস্থাপনা

Ember.js Components হল পুনঃব্যবহারযোগ্য UI উপাদান যা অ্যাপ্লিকেশনের ভিউ এবং লজিককে আলাদা রাখে। প্রতিটি কম্পোনেন্টে একটি JavaScript ক্লাস এবং একটি টেমপ্লেট থাকে, যার মাধ্যমে এটি UI এর অংশ হিসেবে কার্যকরী হয়। Ember.js-এ কম্পোনেন্টের মধ্যে Properties এবং Actions ব্যবস্থাপনা গুরুত্বপূর্ণ, কারণ এগুলি UI এর ডায়নামিক আচরণ এবং ইউজার ইন্টারঅ্যাকশনকে নিয়ন্ত্রণ করে।

Ember.js Component তৈরি করা

একটি কম্পোনেন্ট তৈরি করতে Ember CLI ব্যবহার করা হয়:

ember generate component user-profile

এটি একটি নতুন কম্পোনেন্ট তৈরি করবে app/components/user-profile.js এবং app/templates/components/user-profile.hbs ফাইলে।

১. Component এর Properties ব্যবস্থাপনা

কম্পোনেন্টের properties (অথবা arguments) হল সেই ডেটা যা কম্পোনেন্টে পাস করা হয়। এগুলি প্রপার্টি বা ভেরিয়েবল হিসেবে কম্পোনেন্টের মধ্যে ব্যবহৃত হয়।

১.১ Properties ব্যবহার করা

কম্পোনেন্টে প্রপার্টি ডিফাইন করার জন্য @tracked ডেকোরেটর ব্যবহৃত হয়, যা ডেটার পরিবর্তন ট্র্যাক করে এবং ভিউতে আপডেট করে।

// app/components/user-profile.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class UserProfileComponent extends Component {
  @tracked name = 'John Doe';
  @tracked age = 30;
}

এখানে, name এবং age হল কম্পোনেন্টের প্রপার্টি যা @tracked দ্বারা ট্র্যাক করা হচ্ছে।

১.২ Properties টেমপ্লেটে ব্যবহার করা

কম্পোনেন্টের properties টেমপ্লেটে ব্যবহৃত হয়, যেখানে আপনি ডেটা প্রদর্শন করতে পারেন।

<!-- app/templates/components/user-profile.hbs -->
<h2>User Profile</h2>
<p>Name: {{this.name}}</p>
<p>Age: {{this.age}}</p>

এখানে, name এবং age প্রপার্টি টেমপ্লেটে রেন্ডার করা হচ্ছে।

১.৩ Argument হিসেবে Property পাস করা

কম্পোনেন্টে properties আর্গুমেন্ট হিসেবে পাস করা যেতে পারে, যা বাইরের কম্পোনেন্ট বা টেমপ্লেট থেকে কম্পোনেন্টে ডেটা প্রেরণ করে।

// app/components/user-profile.js
import Component from '@glimmer/component';

export default class UserProfileComponent extends Component {
  get userName() {
    return this.args.name || 'Guest';
  }
}

এখানে, this.args.name দ্বারা বাইরের কম্পোনেন্ট থেকে পাস করা name আর্গুমেন্ট ব্যবহার করা হচ্ছে।

<!-- app/templates/components/user-profile.hbs -->
<p>Welcome, {{this.userName}}</p>

এখন আপনি এই কম্পোনেন্টে বাইরের টেমপ্লেট থেকে নাম পাঠাতে পারবেন:

<UserProfile @name="Alice" />

এটি "Welcome, Alice" প্রদর্শন করবে।

২. Component এর Actions ব্যবস্থাপনা

Actions হল কম্পোনেন্টে নির্দিষ্ট কার্যকলাপের জন্য ব্যবহৃত ফাংশন। এগুলি সাধারণত ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ট্রিগার হয়, যেমন বাটনে ক্লিক করা বা ইনপুট ফিল্ডে টাইপ করা।

২.১ Actions ডিফাইন করা

কম্পোনেন্টে অ্যাকশনগুলি @action ডেকোরেটর ব্যবহার করে ডিফাইন করা হয়। এটি ক্লাসের মধ্যে মেথড হিসেবে কাজ করে।

// app/components/user-profile.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class UserProfileComponent extends Component {
  @tracked name = 'John Doe';
  
  @action
  changeName(newName) {
    this.name = newName;
  }
}

এখানে, changeName একটি অ্যাকশন যা name প্রপার্টির মান পরিবর্তন করবে।

২.২ Actions টেমপ্লেটে ব্যবহার করা

টেমপ্লেটে অ্যাকশন ব্যবহার করতে {{on}} হেল্পার ব্যবহৃত হয়। অ্যাকশনটি একটি ইভেন্ট (যেমন 'click') এর সাথে যুক্ত করা হয়।

<!-- app/templates/components/user-profile.hbs -->
<h2>User Profile</h2>
<p>Name: {{this.name}}</p>
<button {{on 'click' (fn this.changeName 'Jane Doe')}}>Change Name</button>

এখানে, changeName অ্যাকশনটি বাটন ক্লিক করার মাধ্যমে name প্রপার্টি পরিবর্তন করবে।

২.৩ Actions পাস করা (Parent থেকে Child Component এ)

একটি কম্পোনেন্টের actions প্যারেন্ট কম্পোনেন্ট থেকে child component-এ পাস করা যেতে পারে।

// app/components/parent-component.js
import Component from '@glimmer/component';

export default class ParentComponent extends Component {
  @action
  updateName(newName) {
    console.log('New name:', newName);
  }
}

এখন, এই অ্যাকশনটি child component-এ পাস করা হবে:

<!-- app/templates/components/parent-component.hbs -->
<UserProfile @onChangeName={{this.updateName}} />

এবং, child component-এ:

// app/components/user-profile.js
import Component from '@glimmer/component';

export default class UserProfileComponent extends Component {
  @action
  changeName() {
    this.args.onChangeName('John Doe');
  }
}

এখন, যখন changeName অ্যাকশন কল করা হবে, প্যারেন্ট কম্পোনেন্টে updateName অ্যাকশন ট্রিগার হবে।

৩. Component এর মধ্যে Properties এবং Actions এর সাথে কাজ

এখন আমরা একটি সম্পূর্ণ উদাহরণ দেখি যেখানে properties এবং actions একসাথে ব্যবহৃত হবে:

// app/components/user-profile.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class UserProfileComponent extends Component {
  @tracked name = 'John Doe';
  @tracked age = 30;

  @action
  changeName(newName) {
    this.name = newName;
  }

  @action
  incrementAge() {
    this.age += 1;
  }
}

<!-- app/templates/components/user-profile.hbs -->
<h2>User Profile</h2>
<p>Name: {{this.name}}</p>
<p>Age: {{this.age}}</p>
<button {{on 'click' (fn this.changeName 'Alice')}}>Change Name</button>
<button {{on 'click' this.incrementAge}}>Increase Age</button>

এখানে, দুইটি অ্যাকশন ব্যবহৃত হচ্ছে: একটি name পরিবর্তন করার জন্য এবং অন্যটি age বৃদ্ধি করার জন্য।

Ember.js-এ Component এর মধ্যে Properties এবং Actions ব্যবস্থাপনা একটি অত্যন্ত গুরুত্বপূর্ণ কৌশল, যা অ্যাপ্লিকেশনের ডায়নামিক আচরণ এবং ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ভিউ এবং লজিককে নিয়ন্ত্রণ করতে সহায়ক। Properties ডেটা সংরক্ষণ এবং উপস্থাপন করার জন্য ব্যবহৃত হয়, এবং Actions ইউজার ইন্টারঅ্যাকশনের মাধ্যমে পরিবর্তন বা কার্যকলাপ পরিচালনা করতে ব্যবহৃত হয়।