_.template দিয়ে টেমপ্লেট জেনারেট করা

_.template কি?

_.template হল Underscore.js এর একটি ফাংশন যা ডাইনামিক HTML টেমপ্লেট তৈরি করার জন্য ব্যবহৃত হয়। এটি একটি টেমপ্লেট স্ট্রিং নেয়ার মাধ্যমে ডেটা ইনজেক্ট করে একটি HTML ব্লক তৈরি করতে সাহায্য করে। _.template JavaScript-এর অবজেক্ট বা ভেরিয়েবলের মান টেমপ্লেটের মধ্যে ইনজেক্ট করে এবং এটি ডাইনামিকভাবে HTML উৎপন্ন করে।

এই ফাংশনটি খুবই শক্তিশালী, কারণ এটি একদিকে যেখানে সাধারণ HTML কন্টেন্ট তৈরি করতে ব্যবহৃত হয়, অন্যদিকে এটি ডাটা ম্যানিপুলেশন এবং কন্ডিশনাল রেন্ডারিংয়ের মতো জটিল কার্যক্রমগুলোও সমর্থন করে।

_.template এর মৌলিক কাঠামো

_.template ফাংশনটি একটি টেমপ্লেট স্ট্রিং এবং ডাটা অবজেক্ট নেয় এবং একটি ফাংশন রিটার্ন করে যা রেন্ডারিং প্রক্রিয়া পরিচালনা করে। এই রেন্ডারিং ফাংশনটি পরে ডেটা দিয়ে কল করলে এটি একটি সম্পূর্ণ HTML স্ট্রিং রিটার্ন করবে।

সিনট্যাক্স:

_.template(templateString, [settings]);

• templateString: এটি একটি স্ট্রিং যা HTML টেমপ্লেট ধারণ করে, এবং এর মধ্যে ডাইনামিক ডেটা যোগ করার জন্য প্লেসহোল্ডার থাকবে।
• settings: (ঐচ্ছিক) ডিফল্ট সেন্টিংস পরিবর্তন করার জন্য কনফিগারেশন অবজেক্ট।

_.template ব্যবহার করে টেমপ্লেট জেনারেট করা

Underscore.js-এর _.template ব্যবহার করে ডাইনামিক HTML টেমপ্লেট তৈরি করতে আপনি নিচের পদক্ষেপগুলো অনুসরণ করতে পারেন:

১. টেমপ্লেট স্ট্রিং তৈরি করা

প্রথমে একটি টেমপ্লেট স্ট্রিং তৈরি করতে হবে যা HTML এর সাথে ডাইনামিক ডেটা সন্নিবেশ করবে।

২. টেমপ্লেট কম্পাইল করা

_.template ফাংশন ব্যবহার করে টেমপ্লেট স্ট্রিংটি কম্পাইল করে একটি ফাংশনে পরিণত করতে হবে।

৩. ডেটা প্রদান করা

একটি অবজেক্ট বা ভেরিয়েবল দিয়ে কম্পাইল করা ফাংশনটি কল করুন এবং ডাইনামিক ডেটা ইনজেক্ট করুন।

উদাহরণ

ধরা যাক, আপনার কাছে একটি ওয়েবসাইটের জন্য টেমপ্লেট তৈরি করতে হবে যেখানে ব্যবহারকারীর নাম এবং বয়স দেখানো হবে।

টেমপ্লেট স্ট্রিং:

<script type="text/template" id="user-template">
  <h2>Hello, <%= name %>!</h2>
  <p>You are <%= age %> years old.</p>
</script>

JavaScript কোড:

// Underscore.js টেমপ্লেট স্ট্রিং নেয় এবং একটি ফাংশন রিটার্ন করে
var templateString = document.getElementById('user-template').innerHTML;

// টেমপ্লেট কম্পাইল করা
var template = _.template(templateString);

// ডেটা অবজেক্ট
var data = {
  name: 'Alice',
  age: 30
};

// টেমপ্লেট ফাংশন কল করে HTML রেন্ডার করা
var html = template(data);

// HTML যোগ করা
document.body.innerHTML = html;

আউটপুট:

<h2>Hello, Alice!</h2>
<p>You are 30 years old.</p>

এখানে, _.template ব্যবহার করে templateString নামক টেমপ্লেটটি কম্পাইল করা হয়েছে। এরপর, data অবজেক্টের মাধ্যমে ডেটা ইনজেক্ট করা হয়েছে এবং ফাইনাল HTML রেন্ডার করা হয়েছে।

_.template এ প্লেসহোল্ডার ব্যবহারের উদাহরণ

_.template এ প্লেসহোল্ডার হিসেবে <%= %> ব্যবহার করা হয়। প্লেসহোল্ডারে ডেটা ইনজেক্ট করার জন্য আপনি JavaScript অবজেক্ট থেকে ডেটা উল্লেখ করবেন।

উদাহরণ:

var templateString = "Hello, <%= name %>! You are <%= age %> years old.";
var template = _.template(templateString);

var data = {
  name: "Bob",
  age: 25
};

var result = template(data);
console.log(result); // "Hello, Bob! You are 25 years old."

এখানে, <%= name %> এবং <%= age %> হল প্লেসহোল্ডার, যেখানে data অবজেক্টের ডেটা ইনজেক্ট করা হয়েছে।

কন্ডিশনাল প্লেসহোল্ডার এবং লুপিং

Underscore.js টেমপ্লেটে কন্ডিশনাল স্টেটমেন্ট এবং লুপ ব্যবহারের সুবিধাও রয়েছে।

১. কন্ডিশনাল স্টেটমেন্ট

var templateString = "<% if (age >= 18) { %>You are an adult.<% } else { %>You are a minor.<% } %>";
var template = _.template(templateString);

var data = { age: 20 };

var result = template(data);
console.log(result); // "You are an adult."

২. লুপ

var templateString = "<ul><% _.each(names, function(name) { %><li><%= name %></li><% }); %></ul>";
var template = _.template(templateString);

var data = { names: ["Alice", "Bob", "Charlie"] };

var result = template(data);
console.log(result); // <ul><li>Alice</li><li>Bob</li><li>Charlie</li></ul>

এখানে, আমরা _.each ব্যবহার করে একটি অ্যারে লুপ করছি এবং প্রতিটি নামকে HTML তালিকায় রেন্ডার করছি।

_.template এ কাস্টম ডেলিমিটার

By default, Underscore.js টেমপ্লেটে <%= %> ডেলিমিটার ব্যবহার করা হয়, তবে আপনি চাইলে কাস্টম ডেলিমিটারও ব্যবহার করতে পারেন।

উদাহরণ:

var templateString = "Hello, {{name}}!";
var customTemplate = _.template(templateString, { interpolate: /{{([\s\S]+?)}}/g });

var data = { name: "Alice" };

var result = customTemplate(data);
console.log(result); // "Hello, Alice!"

এখানে, আমরা কাস্টম ডেলিমিটার {{}} ব্যবহার করেছি এবং interpolate অপশন দিয়ে এটি সেট করেছি।

সারাংশ

Underscore.js এর _.template ফাংশনটি ডাইনামিক HTML টেমপ্লেট তৈরি করতে ব্যবহৃত হয়। এটি HTML স্ট্রিং এবং ডেটা ইনজেক্ট করার জন্য প্লেসহোল্ডার ব্যবহার করে, এবং ব্যবহারকারী-নির্দিষ্ট ডেটার উপর ভিত্তি করে একটি নতুন HTML স্ট্রিং রেন্ডার করে। _.template টেমপ্লেট স্ট্রিংয়ে কন্ডিশনাল স্টেটমেন্ট, লুপ, এবং কাস্টম ডেলিমিটারও সমর্থন করে, যা ডাইনামিক ওয়েব পেজ তৈরি করতে খুবই কার্যকরী।