Controller তৈরি এবং ব্যবহারের নিয়ম

Ember.js একটি মডেল-ভিউ-কন্ট্রোলার (MVC) আর্কিটেকচার অনুসরণ করে, যেখানে Controller হল অ্যাপ্লিকেশনের ভিউ-লজিককে নিয়ন্ত্রণ করার জন্য ব্যবহৃত একটি গুরুত্বপূর্ণ অংশ। Controller সাধারণত রাউটের সাথে সম্পর্কিত থাকে এবং Model বা ডেটা ধারণ করে এবং টেমপ্লেটের মধ্যে ডেটা উপস্থাপন করতে সহায়তা করে।

Ember.js এ Controller হল একটি সিঙ্গেলটন অবজেক্ট যা রাউটের ডেটা এবং ভিউয়ের মধ্যে যোগাযোগ তৈরি করে।

Controller তৈরি করা

Ember CLI ব্যবহার করে আপনি সহজেই নতুন Controller তৈরি করতে পারেন। এই কমান্ডটি চালান:

ember generate controller about

এটি app/controllers/about.js ফাইল তৈরি করবে, যেখানে about রাউটের জন্য কন্ট্রোলার থাকবে।

১. Controller ফাইলের গঠন

কন্ট্রোলার ফাইল সাধারণত app/controllers/<controller-name>.js ফাইলে থাকে। উদাহরণস্বরূপ, about রাউটের জন্য কন্ট্রোলার দেখতে এরকম হবে:

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

export default class AboutController extends Controller {
  // কন্ট্রোলারের প্রপার্টি
  name = 'Ember.js';
  description = 'A JavaScript framework for building web applications.';
}

এখানে, AboutController নামের একটি কন্ট্রোলার তৈরি করা হয়েছে, যেখানে দুটি প্রপার্টি name এবং description আছে, যা টেমপ্লেটে ব্যবহার হবে।

২. Controller এর ব্যবহার

এখন, কন্ট্রোলারটি app/templates/about.hbs টেমপ্লেটে ব্যবহার করা যাবে:

<!-- app/templates/about.hbs -->
<h1>About {{this.name}}</h1>
<p>{{this.description}}</p>

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

Controller এর বৈশিষ্ট্য এবং কার্যকারিতা

১. Model এবং Querying

একটি রাউটের জন্য কন্ট্রোলার সাধারণত model থেকে ডেটা গ্রহণ করে। যদিও Ember.js স্বয়ংক্রিয়ভাবে মডেল ডেটা রাউট থেকে কন্ট্রোলারে অ্যাক্সেস দেয়, আপনি কন্ট্রোলারে model() মেথড ব্যবহার করে তা কাস্টমাইজ করতে পারেন।

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

export default class AboutController extends Controller {
  model() {
    return this.store.findAll('product');  // API থেকে ডেটা ফেচ করা
  }
}

২. Actions

Ember.js কন্ট্রোলারে actions সংজ্ঞায়িত করতে সাহায্য করে। অ্যাকশনগুলি সাধারণত ইউজার ইন্টারঅ্যাকশন (যেমন বাটন ক্লিক) এর মাধ্যমে ট্রিগার হয়। কন্ট্রোলারে অ্যাকশনগুলিকে actions অবজেক্টে রাখতে হয়।

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

export default class AboutController extends Controller {
  actions: {
    changeDescription(newDescription) {
      this.set('description', newDescription); // description প্রপার্টি আপডেট করা
    }
  }
}

এখন, টেমপ্লেটে একটি অ্যাকশন যুক্ত করতে পারেন:

<!-- app/templates/about.hbs -->
<h1>About {{this.name}}</h1>
<p>{{this.description}}</p>
<button {{on 'click' (fn this.changeDescription 'New Description')}}>Change Description</button>

এখানে, changeDescription অ্যাকশনটি বাটনে ক্লিক করলে description প্রপার্টি আপডেট করবে।

৩. Query Parameters

কন্ট্রোলার সাধারণত URL-এর মাধ্যমে query parameters ব্যবহার করতে পারে। এর মাধ্যমে URL থেকে কন্ট্রোলারে ডেটা পাঠানো যায়।

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

export default class ApplicationController extends Controller {
  queryParams = ['sort'];

  sort = 'asc'; // ডিফল্ট ভ্যালু

  actions: {
    changeSortOrder(order) {
      this.set('sort', order); // sort প্যারামিটার পরিবর্তন করা
    }
  }
}

এখন, টেমপ্লেটে এই query parameter ব্যবহার করতে পারেন:

<!-- app/templates/application.hbs -->
<p>Sort order: {{this.sort}}</p>
<button {{on 'click' (fn this.changeSortOrder 'desc')}}>Sort Descending</button>

এখানে, sort প্রপার্টিটি URL এর query parameter হিসেবে ব্যবহার করা হবে এবং ইউজার সেটি পরিবর্তন করতে পারবেন।

Controller-এর অন্যান্য কার্যকারিতা

1. অ্যাকশন ফিল্টারিং: কন্ট্রোলার অ্যাকশনগুলিকে পৃথক পৃথকভাবে পরিচালনা করতে পারে এবং নির্দিষ্ট শর্ত অনুযায়ী সেগুলিকে কার্যকর করতে পারে।
2. Model ডেটা সিঙ্ক্রোনাইজেশন: কন্ট্রোলারটি রাউটের মডেল ডেটা সহকারে কাজ করে এবং সেই ডেটা টেমপ্লেটের মধ্যে রেন্ডার করা যায়।
3. Dependency Injection: Ember.js বিভিন্ন সেবা এবং ডিপেনডেন্সি কন্ট্রোলারে ইনজেক্ট করে, যেমন services, controllers, ইত্যাদি।

Controller হল Ember.js অ্যাপ্লিকেশনে ভিউ লজিক এবং রাউট ম্যানেজমেন্টের জন্য অত্যন্ত গুরুত্বপূর্ণ একটি অংশ। এটি model এবং view এর মধ্যে যোগাযোগ স্থাপন করে এবং অ্যাপ্লিকেশনের ডেটা ম্যানেজমেন্টকে সহজ করে তোলে। Actions এবং model এর মাধ্যমে কন্ট্রোলারটি অ্যাপ্লিকেশনের ইউজার ইন্টারঅ্যাকশন এবং ডেটা ম্যানিপুলেশন প্রক্রিয়া পরিচালনা করে।

Ember.js-এ কন্ট্রোলার তৈরি এবং ব্যবহারের প্রক্রিয়া অ্যাপ্লিকেশনকে আরও গতিশীল এবং কার্যকরী করে তোলে।