Component এবং Templates এর মধ্যে ডেটা পাস করা

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

Ember.js-এ, Components এবং Templates এর মধ্যে ডেটা পাস করার জন্য কিছু বিশেষ পদ্ধতি রয়েছে, যেমন Attributes এবং Actions এর মাধ্যমে ডেটা প্রেরণ করা হয়।

Ember.js Components

Ember.js-এ কম্পোনেন্ট একটি UI উপাদান যা JavaScript ক্লাস এবং এর সাথে সম্পর্কিত একটি Handlebars টেমপ্লেটের মাধ্যমে কাজ করে। কম্পোনেন্ট সাধারণত UI লজিক এবং ভিউ কন্ট্রোলের জন্য ব্যবহৃত হয়।

কম্পোনেন্ট তৈরি করা হয় ember generate component <component-name> কমান্ডের মাধ্যমে।

Ember.js কম্পোনেন্টের সাথে ডেটা পাস করা

এমবার কম্পোনেন্টের সাথে ডেটা পাস করার জন্য বেশ কয়েকটি পদ্ধতি রয়েছে। দুইটি প্রধান পদ্ধতি হল Attributes এবং Actions।

১. Attributes (ডেটা পাস করা)

কম্পোনেন্টে ডেটা পাঠানোর জন্য attributes ব্যবহার করা হয়। মূলত, parent template থেকে child component এ ডেটা পাস করার জন্য {{component-name attributeName=value}} সিনট্যাক্স ব্যবহার করা হয়।

উদাহরণ: কম্পোনেন্টে ডেটা পাস করা

ধরা যাক, একটি user-profile কম্পোনেন্ট আছে, যেখানে name এবং age ডেটা পাস করা হবে।

ember generate component user-profile

এখন app/templates/application.hbs টেমপ্লেটে এই কম্পোনেন্ট ব্যবহার করা হবে এবং ডেটা পাস করা হবে:

<!-- app/templates/application.hbs -->
<UserProfile @name="John Doe" @age="30" />

এখানে @name এবং @age অ্যাট্রিবিউট হিসেবে user-profile কম্পোনেন্টে পাস করা হয়েছে।

কম্পোনেন্ট কোড

এখন user-profile কম্পোনেন্টে ডেটা গ্রহণ এবং প্রদর্শন করা হবে:

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

export default class UserProfileComponent extends Component {
  // কম্পোনেন্টে ডেটা ব্যবহারের জন্য কিছু লজিক
}

<!-- app/components/user-profile.hbs -->
<h1>Name: {{@name}}</h1>
<p>Age: {{@age}}</p>

এখানে @name এবং @age অ্যাট্রিবিউট হিসাবে কম্পোনেন্টে পাস করা ডেটা প্রদর্শিত হচ্ছে।

২. Actions (ইন্টারঅ্যাকশন এবং ডেটা পরিবর্তন)

কম্পোনেন্টে অ্যাকশন প্রেরণ করতে actions ব্যবহৃত হয়। আপনি যদি কোনো event handler বা action ব্যবহার করতে চান যা প্যারেন্ট কম্পোনেন্টের ডেটাকে পরিবর্তন করবে, তাহলে এটি actions এর মাধ্যমে করা হয়।

উদাহরণ: কম্পোনেন্টে অ্যাকশন প্রেরণ

ধরা যাক, user-profile কম্পোনেন্টে একটি button থাকবে যা ক্লিক করলে প্যারেন্ট কম্পোনেন্টে কিছু পরিবর্তন ঘটাবে।

কম্পোনেন্টের কোড

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

export default class UserProfileComponent extends Component {
  @action
  updateAge() {
    this.args.updateAge(35);  // প্যারেন্টে প্রেরণ করা অ্যাকশন
  }
}

কম্পোনেন্ট টেমপ্লেট

<!-- app/components/user-profile.hbs -->
<h1>Name: {{@name}}</h1>
<p>Age: {{@age}}</p>
<button {{on "click" this.updateAge}}>Update Age</button>

প্যারেন্ট কম্পোনেন্ট

এখন, প্যারেন্ট কম্পোনেন্টে updateAge অ্যাকশনটি ডিফাইন করা হবে যা কম্পোনেন্টে ক্লিক করার পর age আপডেট করবে:

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

export default class ApplicationController extends Controller {
  name = 'John Doe';
  age = 30;

  updateAge(newAge) {
    this.set('age', newAge);  // প্যারেন্টে বয়স আপডেট করা
  }
}

প্যারেন্ট টেমপ্লেট

<!-- app/templates/application.hbs -->
<UserProfile @name={{this.name}} @age={{this.age}} @updateAge={{this.updateAge}} />

এখানে, updateAge অ্যাকশন প্যারেন্ট থেকে কম্পোনেন্টে পাস করা হয়েছে এবং কম্পোনেন্টের button click এর মাধ্যমে প্যারেন্টের age পরিবর্তন হবে।

Ember.js Components এবং Templates এর মধ্যে ডেটা পাস করার উপকারিতা

1. Reusable Components: কম্পোনেন্টের মাধ্যমে UI এর পুনঃব্যবহারযোগ্য অংশ তৈরি করা সম্ভব, যেখানে ডেটা বিভিন্ন টেমপ্লেটে পাঠানো এবং ব্যবহৃত হতে পারে।
2. Separation of Concerns: কম্পোনেন্ট এবং টেমপ্লেটের মধ্যে ডেটা আলাদা করে রাখা যায়, যার ফলে কোড বেশি মডুলার এবং সহজে রক্ষণাবেক্ষণযোগ্য হয়।
3. Data Binding: Ember.js-এর টেমপ্লেট এবং কম্পোনেন্টে Two-way Data Binding সাপোর্ট থাকার কারণে ডেটার আপডেটের সাথে সাথে UI স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।

Ember.js-এ Components এবং Templates এর মধ্যে ডেটা পাস করা অত্যন্ত সহজ এবং কার্যকরী। Attributes এর মাধ্যমে প্যারেন্ট টেমপ্লেট থেকে কম্পোনেন্টে ডেটা পাস করা হয় এবং Actions এর মাধ্যমে কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ইন্টারঅ্যাকশন ঘটানো যায়। এর মাধ্যমে Ember.js অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও সহজ, মডুলার এবং কার্যকরী হয়।