Ember.js Template এবং Handlebars

Ember.js এর টেমপ্লেটিং সিস্টেমের মূল অংশ হল Handlebars। Handlebars একটি জনপ্রিয় template engine যা HTML এবং ডাইনামিক ডেটা রেন্ডার করতে ব্যবহৃত হয়। Ember.js এর টেমপ্লেটিং সিস্টেম Handlebars-এর উপর ভিত্তি করে, যা ব্যবহারকারীদের HTML ডকুমেন্টে ডাইনামিক ডেটা ইনজেক্ট করতে এবং UI রেন্ডার করতে সাহায্য করে।

Ember.js টেমপ্লেটিং সিস্টেম HTMLBars নামে একটি উন্নত সংস্করণ ব্যবহার করে, যা Handlebars-এর একটি পরিশোধিত সংস্করণ। HTMLBars Ember.js এর জন্য নির্দিষ্ট কিছু অপটিমাইজেশন এবং উন্নত ফিচার প্রদান করে, কিন্তু এটি মূলত Handlebars এর কাজই করে।

Handlebars কী?

Handlebars হল একটি logic-less টেমপ্লেটিং ইঞ্জিন, যার মানে হল যে আপনি টেমপ্লেটের মধ্যে কোনো জাভাস্ক্রিপ্ট কোড বা লজিক লিখতে পারবেন না। এটি মূলত ডেটা রেন্ডার করতে ব্যবহৃত হয় এবং এটি টেমপ্লেটের মধ্যে ডাইনামিক ডেটা সহজে প্রদর্শন করতে সহায়ক।

Handlebars টেমপ্লেটিং সিস্টেমে Expression, Helpers, এবং Partials ইত্যাদি ব্যবহার করা হয়। Ember.js এই ধারণাগুলিকে আরও বিস্তৃত এবং কার্যকরভাবে ব্যবহার করে।

Ember.js টেমপ্লেট এবং HTMLBars

Ember.js-এ, HTMLBars টেমপ্লেট ইঞ্জিনে ডাইনামিক ডেটা রেন্ডার করার জন্য Handlebars এর সমস্ত বৈশিষ্ট্য ব্যবহৃত হয়। HTMLBars উন্নত পারফরম্যান্স এবং আরও কার্যকরী উপায়ে টেমপ্লেটের ভিতর ডেটা বেঁধে (binding) রেন্ডার করতে সাহায্য করে।

Ember.js টেমপ্লেটের মৌলিক বৈশিষ্ট্য

1. ডাইনামিক ডেটা রেন্ডারিং: টেমপ্লেটে মডেল বা কন্ট্রোলার থেকে ডেটা ডাইনামিকভাবে রেন্ডার করা।
2. বাইন্ডিং: ডেটা ভিউ এবং মডেলের মধ্যে সিঙ্ক্রোনাইজেশন। যখন মডেল পরিবর্তিত হয়, ভিউ স্বয়ংক্রিয়ভাবে আপডেট হয়।
3. Conditionals: শর্তের ভিত্তিতে কন্টেন্ট রেন্ডার করা (যেমন, {{#if condition}} ... {{/if}} ব্লক ব্যবহার করে)।
4. Iteration: একটি অ্যারের মধ্যে পুনরাবৃত্তি করা (যেমন, {{#each items as |item|}} ... {{/each}} ব্লক ব্যবহার করে)।

Ember.js Template এবং Handlebars এর কিছু প্রধান বৈশিষ্ট্য

১. ডাইনামিক ডেটা রেন্ডারিং

Ember.js টেমপ্লেটে ডাইনামিক ডেটা রেন্ডার করার জন্য Handlebars ব্যবহার করা হয়। উদাহরণস্বরূপ, যদি একটি মডেল বা কন্ট্রোলার থেকে ডেটা আসে, তবে তা টেমপ্লেটে সরাসরি রেন্ডার করা যেতে পারে:

app/templates/application.hbs:

<h1>{{model.title}}</h1>
<p>{{model.description}}</p>

এখানে, model কন্ট্রোলার বা রাউট থেকে আসা ডেটা হিসেবে রেন্ডার হবে।

২. Conditionals (শর্তসমূহ)

Ember.js টেমপ্লেটের মধ্যে শর্তাধীন ডেটা রেন্ডার করার জন্য {{#if}}, {{#else}} বা {{#unless}} ব্যবহার করা হয়। উদাহরণ:

app/templates/application.hbs:

{{#if model.isAvailable}}
  <p>The item is available.</p>
{{else}}
  <p>The item is not available.</p>
{{/if}}

এখানে, যদি model.isAvailable সত্য হয়, তবে "The item is available." বার্তা প্রদর্শিত হবে, অন্যথায় "The item is not available." বার্তা দেখাবে।

৩. Iteration (পুনরাবৃত্তি)

যখন আপনি কোনো অ্যারের মধ্যে পুনরাবৃত্তি করতে চান, তখন {{#each}} ব্লক ব্যবহার করা হয়। এটি সাধারণত তালিকা বা আইটেমগুলির মাধ্যমে পুনরাবৃত্তি করার জন্য ব্যবহৃত হয়।

app/templates/application.hbs:

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

এখানে, model.items অ্যারের প্রতিটি আইটেমের জন্য একটি <li> উপাদান রেন্ডার হবে।

৪. Partials (আংশিক টেমপ্লেট)

Partials হল ছোট টেমপ্লেট যা অন্য টেমপ্লেটের মধ্যে অন্তর্ভুক্ত করা যায়। এটি কোড পুনঃব্যবহারযোগ্যতা উন্নত করতে সহায়ক।

app/templates/application.hbs:

{{> header}}  <!-- Partial ব্যবহার -->
<p>{{model.description}}</p>
{{> footer}}

এখানে, header এবং footer পার্শিয়াল টেমপ্লেট হিসাবে ব্যবহৃত হচ্ছে।

৫. Helpers

Helpers হল বিশেষ কার্যকলাপ যা ডেটাকে টেমপ্লেটে প্রদর্শন করার আগে প্রসেস করে। Ember.js-এ built-in helpers যেমন {{#if}}, {{each}} ছাড়াও custom helpers তৈরি করা যায়।

app/helpers/uppercase.js:

import Helper from '@ember/component/helper';

export default class UppercaseHelper extends Helper {
  compute([string]) {
    return string.toUpperCase();
  }
}

এখানে, uppercase নামক একটি কাস্টম হেল্পার তৈরি করা হয়েছে, যা যেকোনো স্ট্রিংকে বড় অক্ষরে রূপান্তর করবে।

app/templates/application.hbs:

<p>{{uppercase model.title}}</p> <!-- custom helper ব্যবহার -->

এখানে, model.title এর মান বড় অক্ষরে রেন্ডার হবে।

Ember.js এর HTMLBars এর বৈশিষ্ট্য

1. পারফরম্যান্স উন্নতি: HTMLBars অধিক কার্যকরভাবে টেমপ্লেট রেন্ডারিং অপটিমাইজ করে।
2. ডাইনামিক DOM আপডেট: HTMLBars ব্রাউজারের DOM (Document Object Model) তে কমপ্লেক্স পরিবর্তনগুলো ট্র্যাক করতে সক্ষম।
3. কম্পোনেন্টের সঙ্গে একত্রিত হওয়া: HTMLBars কম্পোনেন্ট ভিত্তিক UI গঠন সহজ করে।

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

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 এর টেমপ্লেটিং সিস্টেমের একটি শক্তিশালী অংশ।

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

Ember.js-এর টেমপ্লেট ফাইলগুলিতে Handlebars ব্যবহার করা হয়, এবং এই টেমপ্লেটগুলি .hbs এক্সটেনশন সহ সংরক্ষিত থাকে। Handlebars সিনট্যাক্স Ember.js-এ টেমপ্লেট রেন্ডারিং এবং ডেটা বাউন্ডিংকে সহজ করে তোলে।

Handlebars Syntax এর মূল উপাদান

১. Mustache Syntax (Handlebars Expression)

Handlebars টেমপ্লেটে mustache syntax ({{}}) ব্যবহার করা হয় ডেটা বাউন্ডিং এবং এক্সপ্রেশন রেন্ডার করার জন্য।

<h1>{{model.title}}</h1>

এখানে, model.title অ্যাপ্লিকেশনের মডেল থেকে ডেটা এনে হেডিং হিসাবে রেন্ডার হবে।

২. এপ্লিকেশন মডেল থেকে ডেটা রেন্ডার করা

Ember.js অ্যাপ্লিকেশনের মডেল থেকে ডেটা টেমপ্লেটে রেন্ডার করতে {{model.property}} সিনট্যাক্স ব্যবহার করা হয়:

<h1>{{model.title}}</h1>
<p>{{model.description}}</p>

এখানে, model হল অ্যাপ্লিকেশনের মডেল, এবং title, description হল মডেল প্রপার্টি।

৩. Conditionals: {{#if}} এবং {{#unless}}

Handlebars এ শর্তযুক্ত লজিক ব্যবহার করতে {{#if}} এবং {{#unless}} ব্লক হেল্পার্স ব্যবহার করা হয়।

• {{#if}}: যদি শর্ত সত্য হয় তবে ব্লক রেন্ডার হবে।
• {{#unless}}: যদি শর্ত মিথ্যা হয় তবে ব্লক রেন্ডার হবে।

{{#if model.isPublished}}
  <p>This post is published.</p>
{{else}}
  <p>This post is not published yet.</p>
{{/if}}

এখানে, যদি model.isPublished সত্য হয় তবে "This post is published." মেসেজটি দেখাবে, না হলে "This post is not published yet." দেখাবে।

৪. Loops: {{#each}}

{{#each}} ব্লক হেল্পার ব্যবহার করে অ্যারে বা লিস্টের মধ্যে লুপ চালানো যায়।

<ul>
  {{#each model.posts as |post|}}
    <li>{{post.title}}</li>
  {{/each}}
</ul>

এখানে, model.posts হল একটি অ্যারে এবং এই লুপটি প্রতিটি পোস্টের title প্রপার্টি রেন্ডার করবে।

৫. উপাদানগুলোকে কন্ডিশনাল ক্লাস বা অ্যাট্রিবিউট দিয়ে রেন্ডার করা

Handlebars সিনট্যাক্সের সাহায্যে কন্ডিশনাল স্টাইল বা ক্লাস অ্যাট্রিবিউট যোগ করা যায়।

<button class="{{if model.isPublished 'published' 'draft'}}">
  {{#if model.isPublished}}Published{{else}}Draft{{/if}}
</button>

এখানে, যদি model.isPublished সত্য হয়, তাহলে বাটনে "published" ক্লাস অ্যাড করা হবে, এবং টেক্সট হবে "Published"। অন্যথায় "draft" ক্লাস অ্যাড হবে এবং টেক্সট হবে "Draft"।

৬. অপারেটর ব্যবহার: {{#each}} + {{#if}}

একটি অ্যারে বা অবজেক্টের মধ্যে কন্ডিশনাল লজিক ব্যবহার করার জন্য Handlebars খুব সহজ সিনট্যাক্স সরবরাহ করে।

<ul>
  {{#each model.posts as |post|}}
    {{#if post.isPublished}}
      <li>{{post.title}} - Published</li>
    {{else}}
      <li>{{post.title}} - Draft</li>
    {{/if}}
  {{/each}}
</ul>

এখানে, প্রতিটি পোস্টের isPublished প্রপার্টি চেক করা হয় এবং তার ভিত্তিতে "Published" বা "Draft" টেক্সট দেখানো হয়।

৭. ব্লক হেল্পার্স: {{#link-to}}

Ember.js-এ রাউটিং ব্যবস্থাপনার জন্য {{#link-to}} ব্লক হেল্পার ব্যবহার করা হয়। এটি রাউটের মধ্যে নেভিগেশন তৈরি করতে সাহায্য করে।

{{#link-to 'post' model.id}}View Post{{/link-to}}

এখানে, model.id এর মাধ্যমে রাউটের URL তৈরি করা হয় এবং ব্যবহারকারীকে নির্দিষ্ট পোস্টের পেজে নিয়ে যাওয়া হয়।

৮. এক্সপ্রেশন: {{#with}}

{{#with}} ব্লক হেল্পার ব্যবহার করে আপনি কোন ডেটা বা অবজেক্টকে স্থানীয়ভাবে ব্যবহার করতে পারেন।

{{#with model.author as |author|}}
  <h2>{{author.name}}</h2>
  <p>{{author.bio}}</p>
{{/with}}

এখানে, model.author এর তথ্য author হিসেবে স্থানীয়ভাবে ব্যবহার করা হচ্ছে, যাতে আপনি ডেটা রেন্ডার করার সময় সরাসরি প্রপার্টি অ্যাক্সেস করতে পারেন।

Ember.js Handlebars এর বিশেষ বৈশিষ্ট্য

1. ডেটা বাউন্ডিং: Ember.js-এ {{}} সিনট্যাক্স দিয়ে মডেল এবং ভিউ-এর মধ্যে ডেটা সিঙ্ক্রোনাইজ করা সহজ।
2. শর্তযুক্ত লজিক: {{#if}}, {{#unless}} এবং {{#each}} ব্লক হেল্পার্সের মাধ্যমে শর্তযুক্ত লজিক এবং লুপিং সহজভাবে পরিচালনা করা যায়।
3. কম্পোনেন্ট ব্যবহারের সহজতা: Handlebars কম্পোনেন্ট ভিত্তিক ডিজাইন সমর্থন করে, যা পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করতে সাহায্য করে।
4. রাউটিং এবং নেভিগেশন: {{#link-to}} হেল্পার ব্যবহার করে অ্যাপ্লিকেশনের মধ্যে সহজে রাউটিং এবং নেভিগেশন তৈরি করা যায়।

Ember.js Handlebars Syntax অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি HTML এবং ডেটার মধ্যে সম্পর্ক স্থাপন করতে সাহায্য করে এবং সহজে ডাইনামিক UI তৈরি করতে পারে। Handlebars এর সাহায্যে অ্যাপ্লিকেশনের টেমপ্লেট রেন্ডারিং, শর্তযুক্ত লজিক, লুপিং এবং নেভিগেশন খুবই সহজ হয়ে ওঠে।

Ember.js-এ Loops (লুপ) এবং Conditionals (শর্তসাপেক্ষ) ব্যবহার করে ডেটা প্রদর্শন করার জন্য Handlebars টেমপ্লেট ইঞ্জিন ব্যবহার করা হয়। Handlebars একটি Mustache-অনুসরণকারী টেমপ্লেট ইঞ্জিন যা ডাইনামিক ডেটা প্রদর্শনের জন্য সহজ এবং শক্তিশালী উপায় প্রদান করে। আপনি {{#each}} লুপ এবং {{#if}} বা {{#unless}} কন্ডিশনাল ব্যবহার করে ডেটা রেন্ডার এবং শর্তানুযায়ী উপস্থাপন করতে পারেন।

এখানে Ember.js-এ loops এবং conditionals ব্যবহার করে ডেটা প্রদর্শনের পদ্ধতি নিয়ে বিস্তারিত আলোচনা করা হবে।

1. Loops (লুপ) ব্যবহার করে ডেটা প্রদর্শন

Ember.js-এ {{#each}} হ্যান্ডেলবার্স হেল্পার ব্যবহার করে আপনি একটি অ্যারের সমস্ত আইটেমের উপর লুপ করতে পারেন। এটি খুবই সহায়ক যখন আপনি কোনো তালিকা বা ডেটাবেস থেকে প্রাপ্ত তথ্যকে প্রদর্শন করতে চান।

{{#each}} লুপ ব্যবহার

{{#each}} হ্যান্ডেলবার্স ব্লক হেল্পারকে ব্যবহার করে আপনি অ্যারে বা অবজেক্টের উপর লুপ করতে পারেন। উদাহরণস্বরূপ, যদি আপনার কাছে ব্যবহারকারীদের একটি তালিকা থাকে এবং আপনি এটি টেমপ্লেটে দেখাতে চান, তবে তা এইভাবে করা হবে:

// app/routes/application.js
import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  model() {
    return [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
      { id: 3, name: 'Alice Johnson' }
    ];
  }
}

এখানে, model() মেথডের মাধ্যমে আমরা একটি অ্যারে তৈরি করেছি, যেখানে কিছু ব্যবহারকারীর তথ্য রয়েছে। এখন, এই ডেটাকে টেমপ্লেটে লুপ করতে হবে।

<!-- app/templates/application.hbs -->
<ul>
  {{#each model as |user|}}
    <li>{{user.name}}</li>
  {{/each}}
</ul>

এখানে:

• {{#each model as |user|}} ব্লক হেল্পারটি model অ্যারের প্রতিটি আইটেমের উপর লুপ করবে এবং প্রতি আইটেমকে user নামক একটি লুপ ভ্যারিয়েবলে অ্যাসাইন করবে।
• {{user.name}} ব্যবহার করে প্রতিটি ব্যবহারকারীর নাম রেন্ডার করা হয়েছে।

2. Conditionals (শর্তানুযায়ী) ব্যবহার করে ডেটা প্রদর্শন

Ember.js-এ শর্তানুযায়ী ডেটা প্রদর্শনের জন্য {{#if}} এবং {{#unless}} হ্যান্ডেলবার্স হেল্পার ব্যবহার করা হয়।

{{#if}} শর্ত ব্যবহার

{{#if}} হেল্পারটি একটি শর্ত যাচাই করে এবং যদি শর্তটি সত্য হয়, তবে তার মধ্যে থাকা কোডটি রেন্ডার করবে।

<!-- app/templates/application.hbs -->
{{#if model}}
  <h2>Users List</h2>
  <ul>
    {{#each model as |user|}}
      <li>{{user.name}}</li>
    {{/each}}
  </ul>
{{else}}
  <p>No users available.</p>
{{/if}}

এখানে:

• {{#if model}} শর্তটি যাচাই করছে যে model ডেটা রয়েছে কি না।
• যদি model অ্যারে থাকে, তাহলে Users List এবং তার তালিকা রেন্ডার হবে।
• যদি model অ্যারে খালি থাকে, তবে No users available. মেসেজটি দেখানো হবে।

{{#unless}} শর্ত ব্যবহার

{{#unless}} হেল্পারটি if এর বিপরীত। এটি তখন কার্যকর হয় যখন শর্তটি মিথ্যা হয়।

<!-- app/templates/application.hbs -->
{{#unless model}}
  <p>No users found</p>
{{/unless}}

এখানে:

• {{#unless model}} শর্তটি তখন সত্য হবে যখন model ডেটা উপস্থিত না থাকে, এবং No users found মেসেজটি দেখাবে।

3. Complex Conditions (জটিল শর্ত) ব্যবহার

Ember.js-এ একাধিক শর্ত ব্যবহার করতে {{#if}} এর মধ্যে else এবং elseif ব্যবহার করা যায়। তবে, Handlebars সরাসরি elseif সাপোর্ট করে না, তাই আপনাকে {{#if}} এবং {{else if}} এরকম কাঠামো তৈরি করতে হবে।

<!-- app/templates/application.hbs -->
{{#if isUserLoggedIn}}
  <h2>Welcome, User!</h2>
{{else if isAdmin}}
  <h2>Welcome, Admin!</h2>
{{else}}
  <h2>Please log in.</h2>
{{/if}}

এখানে:

• isUserLoggedIn এবং isAdmin দুইটি শর্ত রয়েছে।
• প্রথম শর্ত যদি সত্য হয়, তবে Welcome, User! মেসেজটি প্রদর্শিত হবে।
• যদি প্রথম শর্ত মিথ্যা হয়, তবে isAdmin শর্তটি পরীক্ষা করা হবে, এবং যদি তা সত্য হয়, তবে Welcome, Admin! প্রদর্শিত হবে।

4. Combining Loops and Conditionals (লুপ এবং কন্ডিশনাল একত্রে ব্যবহার)

আপনি লুপ এবং শর্ত একত্রে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, যদি আপনি ব্যবহারকারীদের তালিকায় কেবলমাত্র সক্রিয় ব্যবহারকারীদের প্রদর্শন করতে চান:

<!-- app/templates/application.hbs -->
<ul>
  {{#each model as |user|}}
    {{#if user.isActive}}
      <li>{{user.name}}</li>
    {{/if}}
  {{/each}}
</ul>

এখানে:

• {{#each model as |user|}} লুপের মাধ্যমে model অ্যারের প্রতিটি আইটেমে যান।
• {{#if user.isActive}} শর্তটি যাচাই করছে যে user.isActive সত্য কি না। যদি সত্য হয়, তবে সেই ব্যবহারকারীর নামটি রেন্ডার হবে।

Ember.js-এ loops এবং conditionals ব্যবহার করে ডেটা প্রদর্শন করা খুবই সহজ এবং শক্তিশালী। Handlebars টেমপ্লেট ইঞ্জিন {{#each}} এবং {{#if}} বা {{#unless}} হেল্পারের মাধ্যমে আপনি অ্যারের উপর লুপ চালাতে এবং শর্তানুযায়ী ডেটা রেন্ডার করতে পারবেন। এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে ডাইনামিক এবং ইন্টারেক্টিভ উপাদান যুক্ত করতে সক্ষম হবেন।

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 অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও সহজ, মডুলার এবং কার্যকরী হয়।

Ember.js-এ Template Helpers বিশেষভাবে Handlebars টেমপ্লেট ইঞ্জিনের জন্য ব্যবহৃত হয়, যা অ্যাপ্লিকেশনটির ভিউতে ডাইনামিক কনটেন্ট রেন্ডার করতে সহায়ক। Helpers হল এমন ফাংশন যা টেমপ্লেটের ভিতরে ব্যবহৃত হয় এবং ডেটা রেন্ডার করার জন্য লজিক প্রদান করে।

Custom Helpers হল বিশেষভাবে তৈরি করা হেল্পার যা আপনার অ্যাপ্লিকেশনের নির্দিষ্ট প্রয়োজনীয়তা অনুযায়ী কাস্টম লজিক প্রয়োগ করে।

এই গাইডে, আমরা Template Helpers এবং Custom Helpers তৈরি করার পদ্ধতি এবং তাদের ব্যবহার দেখব।

Template Helpers

Ember.js-এর Template Helpers হল Handlebars টেমপ্লেট ইঞ্জিনের সাথে সম্পর্কিত। Ember.js নিজে কিছু বিল্ট-ইন হেল্পার প্রদান করে যেমন {{each}}, {{if}}, {{link-to}}, {{outlet}} ইত্যাদি, যেগুলো সাধারণভাবে টেমপ্লেট রেন্ডার করার সময় ব্যবহার করা হয়।

উদাহরণ: বিল্ট-ইন Template Helpers

1. {{each}}: এটি একটি অ্যারে বা লিস্টের উপর লুপ করে।

   <ul>
     {{#each model.posts as |post|}}
       <li>{{post.title}}</li>
     {{/each}}
   </ul>
   

2. {{if}}: একটি শর্তাধীন টেমপ্লেট হেল্পার যা নির্দিষ্ট শর্তের ভিত্তিতে উপাদান রেন্ডার করে।

   {{#if model.isAuthenticated}}
     <p>Welcome back!</p>
   {{else}}
     <p>Please log in.</p>
   {{/if}}
   

3. {{link-to}}: এই হেল্পারটি একটি লিঙ্ক তৈরি করতে ব্যবহৃত হয় যা নির্দিষ্ট রাউটের সাথে সংযুক্ত থাকে।

   {{link-to 'about' 'about'}}
   

এখানে, link-to হেল্পারটি about রাউটের সাথে একটি লিঙ্ক তৈরি করবে।

Custom Helpers তৈরি করা

আপনি Ember.js-এ কাস্টম হেল্পার তৈরি করতে পারেন যা আপনার অ্যাপ্লিকেশনের জন্য নির্দিষ্ট লজিক বা আচরণ প্রদান করবে। এই কাস্টম হেল্পারগুলো সাধারণত app/helpers/ ফোল্ডারে তৈরি করা হয়।

Custom Helper তৈরি করার ধাপ

1. Ember CLI দিয়ে Helper তৈরি করা

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

   ember generate helper format-date
   

   এটি app/helpers/format-date.js ফাইল তৈরি করবে।

2. Custom Helper কনফিগারেশন

   app/helpers/format-date.js ফাইলের মধ্যে আমরা Helper তৈরি করতে পারি:

   import { helper } from '@ember/component/helper';
   
   export function formatDate([date]) {
     let options = { year: 'numeric', month: 'long', day: 'numeric' };
     return new Date(date).toLocaleDateString(undefined, options);
   }
   
   export default helper(formatDate);
   

   এখানে, formatDate হল কাস্টম হেল্পার যা একটি তারিখকে গ্রহণ করে এবং সেটি একটি নির্দিষ্ট ফর্ম্যাটে রেন্ডার করে। এটি toLocaleDateString ব্যবহার করে তারিখটি সুন্দরভাবে প্রদর্শন করবে।

3. Helper ব্যবহার করা

   তৈরি করা কাস্টম হেল্পারটি টেমপ্লেটে ব্যবহার করা যায়:

   <p>Post published on: {{format-date model.postDate}}</p>
   

   এখানে, format-date হেল্পারটি model.postDate এর মান ফরম্যাট করবে এবং তা টেমপ্লেটে রেন্ডার হবে।

Ember.js-এ Common Custom Helpers

এখন কিছু সাধারণ কাস্টম হেল্পার তৈরি করার উদাহরণ দেখি যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হতে পারে:

১. Uppercase Helper

এই হেল্পারটি একটি স্ট্রিংকে বড় হাতের অক্ষরে পরিবর্তন করবে।

// app/helpers/uppercase.js
import { helper } from '@ember/component/helper';

export function uppercase([string]) {
  return string.toUpperCase();
}

export default helper(uppercase);

ব্যবহার:

<p>{{uppercase 'hello world'}}</p>  <!-- HELLO WORLD -->

২. Subtract Helper

এই হেল্পারটি দুটি সংখ্যার মধ্যে পার্থক্য বের করবে।

// app/helpers/subtract.js
import { helper } from '@ember/component/helper';

export function subtract([num1, num2]) {
  return num1 - num2;
}

export default helper(subtract);

ব্যবহার:

<p>{{subtract 10 5}}</p>  <!-- 5 -->

৩. Pluralize Helper

এই হেল্পারটি একটি শব্দের প্লুরাল ফর্ম রেন্ডার করতে ব্যবহৃত হয়।

// app/helpers/pluralize.js
import { helper } from '@ember/component/helper';

export function pluralize([count, word]) {
  return count === 1 ? word : `${word}s`;
}

export default helper(pluralize);

ব্যবহার:

<p>{{pluralize model.commentsCount 'comment'}}</p>  <!-- 5 comments -->

Ember.js-এ Helper এর সুবিধা

1. কাস্টম লজিক তৈরি করা: আপনি যেকোনো ধরনের কাস্টম লজিক তৈরি করতে পারেন যা টেমপ্লেটের ভিতরে সরাসরি ব্যবহার করা যাবে।
2. ডাইনামিক ডেটা রেন্ডারিং: হেল্পারগুলো ডেটার উপর ভিত্তি করে ডাইনামিক রেন্ডারিং সম্ভব করে তোলে।
3. কোড পুনঃব্যবহারযোগ্যতা: একবার তৈরি করা হেল্পার পুনঃব্যবহারযোগ্য এবং অ্যাপ্লিকেশনের বিভিন্ন অংশে ব্যবহার করা যায়।
4. ক্লিন টেমপ্লেট: টেমপ্লেটে জটিল লজিক সরাসরি না রেখে, হেল্পার ব্যবহারে কোড আরও পরিষ্কার এবং সংক্ষিপ্ত হয়।

Template Helpers এবং Custom Helpers এমবারজেএস-এ খুবই গুরুত্বপূর্ণ টুল যা টেমপ্লেটে ডেটা রেন্ডার করার জন্য শক্তিশালী কার্যকারিতা প্রদান করে। Built-in helpers সহজ এবং দ্রুত কাজ করতে সহায়ক, আর Custom helpers আপনাকে আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুযায়ী কাস্টম লজিক তৈরির সুযোগ দেয়। Ember.js-এ এই হেল্পারগুলো ব্যবহার করে আপনি টেমপ্লেটগুলিকে আরও ডাইনামিক এবং কার্যকরী করতে পারেন।