Handlebars কী এবং কিভাবে এটি কাজ করে?

Handlebars একটি জনপ্রিয় টেমপ্লেটিং ইঞ্জিন যা Ember.js এর সাথে ব্যবহৃত হয়। এটি একটি শক্তিশালী, প্রমিত এবং সহজবোধ্য টেমপ্লেটিং ভাষা, যা ডাইনামিক HTML কন্টেন্ট রেন্ডার করতে ব্যবহৃত হয়। Handlebars এমবারজেএস-এর টেমপ্লেট রেন্ডারিং সিস্টেমের মূল ভিত্তি এবং এটি Ember.js-এর ভিউ লেয়ারে কাজ করে।

Handlebars কী?

Handlebars হল একটি JavaScript টেমপ্লেট ইঞ্জিন, যা ডাইনামিক HTML তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত Mustache টেমপ্লেট ইঞ্জিনের উন্নত সংস্করণ। Handlebars আপনাকে HTML টেমপ্লেট লিখতে সহায়তা করে, যেখানে ডেটার মান অটোমেটিকভাবে বসানো হয়। যখন ডেটা পরিবর্তিত হয়, তখন টেমপ্লেটও সেই অনুযায়ী আপডেট হয়।

Ember.js-এর মধ্যে Handlebars একটি ম্যান্ডেটরি টেমপ্লেট ইঞ্জিন হিসেবে ব্যবহৃত হয়, যার মাধ্যমে HTML স্ট্রাকচার ডাইনামিকভাবে জেনারেট করা হয়। এই টেমপ্লেটগুলিতে ডেটা, কন্ডিশনাল লজিক এবং লুপিং করা যায়, যা অ্যাপ্লিকেশনটির UI কে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে।

Handlebars কীভাবে কাজ করে?

Handlebars এর কাজ করার প্রক্রিয়া অনেকটা data-binding এর মতো। যখন আপনার অ্যাপ্লিকেশন ডেটা পরিবর্তিত হয়, তখন Handlebars সেই পরিবর্তনগুলো DOM (Document Object Model)-এ রিফ্লেক্ট করে, এবং এটি পুনরায় রেন্ডার করে।

১. ডেটার সাথে টেমপ্লেট যোগ করা

Handlebars টেমপ্লেটে {{}} সিঙ্কট্যাক্স ব্যবহার করা হয়। Ember.js এর মধ্যে Handlebars টেমপ্লেটগুলো ডেটার সাথে সংযুক্ত করতে সাহায্য করে।

<!-- app/templates/application.hbs -->
<h1>Welcome to {{model.name}}!</h1>
<p>{{model.description}}</p>

এখানে, {{model.name}} এবং {{model.description}} Handlebars এক্সপ্রেশন, যা মডেল থেকে ডেটা পাবে এবং সেই ডেটা HTML এর মধ্যে স্থাপন করবে।

২. টেমপ্লেট রেন্ডারিং

Ember.js অ্যাপ্লিকেশনের মধ্যে, টেমপ্লেটগুলির রেন্ডারিং এমনভাবে কাজ করে:

• প্রথমে, মডেল ডেটা লোড হয়।
• তারপর, সেই ডেটাকে টেমপ্লেটে বসানো হয়।
• যদি ডেটা পরিবর্তিত হয়, তাহলে টেমপ্লেট আবার রেন্ডার হয় এবং UI স্বয়ংক্রিয়ভাবে আপডেট হয়।

৩. কন্ডিশনাল লজিক

Handlebars কন্ডিশনাল লজিক (if/else) সমর্থন করে। এটি যদি কোনও শর্ত পূর্ণ হয়, তাহলে সেই শর্ত অনুযায়ী HTML রেন্ডার করবে।

{{#if model.isLoggedIn}}
  <h1>Welcome, {{model.username}}!</h1>
{{else}}
  <h1>Please log in</h1>
{{/if}}

এখানে, {{#if model.isLoggedIn}} যদি model.isLoggedIn সত্য হয়, তবে "Welcome, {{model.username}}!" দেখানো হবে, অন্যথায় "Please log in" দেখানো হবে।

৪. লুপিং (Iterating over Data)

Handlebars-এ {{#each}} হ্যান্ডলবার ব্যবহার করে অ্যারে বা লিস্টের উপর লুপ করতে পারেন। এটি ডেটার প্রতিটি উপাদানকে টেমপ্লেটে রেন্ডার করে।

<ul>
  {{#each model.items as |item|}}
    <li>{{item.name}}</li>
  {{/each}}
</ul>

এখানে, {{#each model.items}} লুপের মাধ্যমে model.items অ্যারের প্রতিটি আইটেমে প্রবেশ করে এবং {{item.name}} তার নাম রেন্ডার করে।

৫. হেল্পার্স (Helpers)

Handlebars কাস্টম ফাংশন বা হেল্পার তৈরি করতে সহায়ক। আপনি কোনও লজিক প্রয়োগ করতে চাইলে হেল্পার ব্যবহার করতে পারেন।

{{uppercase model.username}}

এখানে, uppercase একটি কাস্টম হেল্পার হতে পারে, যা model.username এর মানকে বড় হাতের অক্ষরে পরিবর্তন করবে।

Ember.js এ Handlebars কিভাবে ব্যবহৃত হয়?

Ember.js টেমপ্লেটিং সিস্টেম Handlebars এর সাথে একীভূত। Ember.js অটোমেটিক্যালি HTMLBars ব্যবহার করে, যা Handlebars এর একটি ডেরিভেটিভ। Ember.js-এ Handlebars টেমপ্লেট ব্যবহার করার জন্য, app/templates/ ফোল্ডারে .hbs এক্সটেনশন সহ টেমপ্লেট ফাইল তৈরি করতে হয়।

Ember.js টেমপ্লেটের স্ট্রাকচার:

<!-- app/templates/application.hbs -->
<h1>Welcome to {{model.name}}!</h1>
<p>{{model.description}}</p>

এখানে application.hbs হল Ember.js অ্যাপ্লিকেশনের মূল টেমপ্লেট, যা অ্যাপ্লিকেশন এর ভিউ বা UI তৈরি করে।

১. Controller এবং Model থেকে Data Bind

Ember.js স্বয়ংক্রিয়ভাবে controller এবং model এর ডেটা টেমপ্লেটে পাঠিয়ে দেয়।

app/routes/application.js:

import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  model() {
    return {
      name: 'Ember.js',
      description: 'A JavaScript framework for building web applications.'
    };
  }
}

এখানে, model() মেথডটি Ember.js এর জন্য ডেটা রিটার্ন করছে, যা পরে টেমপ্লেটে রেন্ডার হবে।

Handlebars এর সুবিধা

1. সরাসরি ডেটা রেন্ডারিং: Handlebars ডেটাকে সরাসরি HTML টেমপ্লেটে রেন্ডার করতে সক্ষম।
2. লজিক কম্পিউটেশন: কন্ডিশনাল, লুপিং, এবং হেল্পার ব্যবহার করে টেমপ্লেটের মধ্যে লজিক প্রয়োগ করা সহজ।
3. অটো-রেন্ডারিং: যখন ডেটা পরিবর্তিত হয়, Handlebars স্বয়ংক্রিয়ভাবে টেমপ্লেট রিফ্রেশ করে এবং UI আপডেট হয়।
4. সহজ এবং পরিষ্কার টেমপ্লেটিং সিস্টেম: Handlebars সোজা এবং পরিষ্কার সিঙ্কট্যাক্স প্রদান করে, যা ডেভেলপারদের জন্য সহজ এবং দ্রুত কাজ করা সম্ভব করে।

Handlebars Ember.js এর টেমপ্লেটিং ইঞ্জিন, যা HTML রেন্ডারিং এবং ডেটা ম্যানিপুলেশন সহজ করে তোলে। এর মাধ্যমে আপনি সহজেই ডাইনামিক HTML তৈরি করতে পারেন, যা পরিবর্তিত ডেটার সাথে স্বয়ংক্রিয়ভাবে আপডেট হয়। Ember.js এ HTMLBars ব্যবহার করা হয়, যা Handlebars এর উপর ভিত্তি করে তৈরি এবং Ember.js এর টেমপ্লেটিং সিস্টেমের একটি শক্তিশালী অংশ।