Ember.js এর Controller হচ্ছে অ্যাপ্লিকেশনের লজিক এবং ভিউয়ের মধ্যে একটি সংযোগস্থল। Controller-এর মধ্যে আপনি properties এবং actions সংজ্ঞায়িত করতে পারেন, যা আপনার অ্যাপ্লিকেশনের ডেটা এবং ইউজার ইন্টারঅ্যাকশনের সাথে সম্পর্কিত। Controller ব্যবহার করে আপনি UI-তে ডেটা পরিবর্তন করতে পারেন এবং ব্যবহারকারীর অ্যাকশনগুলো পরিচালনা করতে পারেন।
এখানে Ember.js-এর Controller এর Actions এবং Properties সম্পর্কে বিস্তারিত আলোচনা করা হলো।
Controller এর ভূমিকা
Controller মূলত Model এবং View এর মধ্যে একটি ব্রিজের কাজ করে। এটি Model থেকে ডেটা নিয়ে View-এ পাঠায় এবং View-এর পরিবর্তন বা ইউজার ইন্টারঅ্যাকশন এর উপর ভিত্তি করে Model পরিবর্তন করতে সাহায্য করে। Controller এ properties (যেমন, ডেটা প্রোপার্টি) এবং actions (যেমন, ইউজার ইন্টারঅ্যাকশনগুলির জন্য) থাকে।
Controller এর Properties
Properties হল সেই ভেরিয়েবল বা ডেটা যা Controller এ সংজ্ঞায়িত থাকে এবং View-এ ডেটা প্রদর্শন করতে ব্যবহৃত হয়। Controller-এর মধ্যে সাধারণত model, computed properties, এবং state properties থাকে।
উদাহরণ:
// app/controllers/about.js
import Controller from '@ember/controller';
export default class AboutController extends Controller {
// properties
title = 'Ember.js - A JavaScript Framework';
// computed property
get description() {
return `Welcome to the world of ${this.title}!`;
}
// model property
modelData = this.model; // model থেকে ডেটা এক্সেস করা
}
এখানে:
- title: একটি সাধারণ property যা
Ember.js - A JavaScript Frameworkএর মান ধারণ করছে। - description: একটি computed property যা title থেকে ডেটা নিয়ে একটি নতুন মান তৈরি করছে।
- modelData: এটি model থেকে ডেটা অ্যাক্সেস করছে এবং UI তে প্রদর্শন করতে প্রস্তুত।
টেমপ্লেটে properties ব্যবহার:
<!-- app/templates/about.hbs -->
<h1>{{this.title}}</h1>
<p>{{this.description}}</p>
এখানে, title এবং description Controller থেকে টেমপ্লেটে রেন্ডার করা হবে।
Controller এর Actions
Actions হলো সেই ফাংশন বা মেথড যা ইউজারের ইন্টারঅ্যাকশনের ভিত্তিতে ট্রিগার হয়। উদাহরণস্বরূপ, একটি বোতাম ক্লিক বা একটি ফর্ম সাবমিট হলে যে ফাংশনটি চালু হবে, তা action হিসেবে কন্ট্রোলারে সংজ্ঞায়িত করা হয়।
উদাহরণ:
// app/controllers/about.js
import Controller from '@ember/controller';
export default class AboutController extends Controller {
// action
actions: {
changeTitle() {
this.set('title', 'Ember.js - The Modern Web Framework');
},
resetTitle() {
this.set('title', 'Ember.js - A JavaScript Framework');
}
}
}
এখানে, changeTitle এবং resetTitle দুটি action। যখন ইউজার কোনো ইন্টারঅ্যাকশন করবে (যেমন একটি বোতাম ক্লিক), তখন এই actions ট্রিগার হবে এবং title এর মান পরিবর্তন হবে।
টেমপ্লেটে actions ব্যবহার:
<!-- app/templates/about.hbs -->
<h1>{{this.title}}</h1>
<button {{on "click" this.changeTitle}}>Change Title</button>
<button {{on "click" this.resetTitle}}>Reset Title</button>
এখানে:
- {{on "click" this.changeTitle}}: এটি বোতাম ক্লিক হলে changeTitle action-টি ট্রিগার করবে এবং title পরিবর্তন হবে।
- {{on "click" this.resetTitle}}: এটি resetTitle action-টি ট্রিগার করবে এবং title মূল মানে ফিরে আসবে।
Controller এর Default Actions
Ember.js এর Controller কিছু ডিফল্ট actions সরবরাহ করে, যেমন:
- model(): যখন রাউট লোড হয়, তখন এটি মডেল ফেচ করতে ব্যবহৃত হয়।
- setupController(): কন্ট্রোলার সেট আপ করার জন্য ব্যবহৃত হয়।
- renderTemplate(): কন্ট্রোলারের ডেটা এবং মডেল রেন্ডার করতে ব্যবহৃত হয়।
Action এবং Properties-এর মধ্যে পার্থক্য
- Properties: এরা সাধারণত ডেটা বা মান সংরক্ষণ করে যা ভিউ-এ রেন্ডার করা হয় এবং যে ডেটা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে পরিবর্তিত হতে পারে।
- Actions: এইগুলো ফাংশন বা মেথড যেগুলো ইউজারের ইন্টারঅ্যাকশন দ্বারা ট্রিগার হয় এবং সাধারণত ডেটা পরিবর্তন বা অ্যাপ্লিকেশনের অবস্থা পরিবর্তন করতে ব্যবহৃত হয়।
Ember.js Controller এর অন্যান্য বৈশিষ্ট্য
- Observing Properties: আপনি properties এর পরিবর্তন পর্যবেক্ষণ করতে পারেন। যেমন, কোনো property পরিবর্তিত হলে তা অনুযায়ী অন্য কোনো action বা function ট্রিগার করা।
- Nested Controllers: Ember.js-এ আপনি নেস্টেড রাউট বা কম্পোনেন্টে কন্ট্রোলার ব্যবহার করতে পারেন, যা একটি অভ্যন্তরীণ কন্ট্রোলার হিসেবে কাজ করে।
Controller Ember.js-এ ভিউ এবং মডেলের মধ্যে একটি সংযোগস্থল হিসেবে কাজ করে। Properties এবং Actions কন্ট্রোলার এ অ্যাপ্লিকেশনের ইউজার ইন্টারঅ্যাকশনের ওপর ভিত্তি করে ডেটা এবং কার্যকলাপ নিয়ন্ত্রণ করতে ব্যবহৃত হয়। কন্ট্রোলার ব্যবহার করে আপনি অ্যাপ্লিকেশনের অবস্থা পরিবর্তন করতে পারেন এবং ইউজারের ইন্টারঅ্যাকশন অনুযায়ী ভিউ আপডেট করতে পারেন।
Read more
