KnockoutJS হল একটি JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে এবং ডেটা-বাইন্ডিং এবং ডিপেনডেন্সি ট্র্যাকিং এর মাধ্যমে ডাইনামিক কন্টেন্ট ব্যবস্থাপনা সহজ করে। Template Binding হল KnockoutJS এর একটি শক্তিশালী বৈশিষ্ট্য, যা আপনাকে ডাইনামিক কন্টেন্ট প্রদর্শন করতে সাহায্য করে, যেমন একাধিক আইটেমের লিস্ট তৈরি করা এবং সেই তালিকার প্রতিটি আইটেমের জন্য কাস্টম টেমপ্লেট রেন্ডার করা।
Template Binding মূলত foreach এর মতো ডাইনামিকভাবে HTML টেমপ্লেট রেন্ডার করতে ব্যবহৃত হয়, যেখানে ডেটা পরিবর্তিত হলে UI স্বয়ংক্রিয়ভাবে আপডেট হবে।
এই গাইডে KnockoutJS Template Binding ব্যবহার করে ডাইনামিক কন্টেন্ট প্রদর্শন করা হবে।
1. KnockoutJS তে Template Binding এর ধারণা:
Template Binding ব্যবহারের মাধ্যমে আপনি KnockoutJS এ একটি কাস্টম টেমপ্লেট ডিফাইন করতে পারেন এবং ডেটা পরিবর্তিত হলে সেই টেমপ্লেটটি ডাইনামিকভাবে রেন্ডার হবে। এটি <script> ট্যাগ ব্যবহার করে HTML টেমপ্লেট তৈরি করতে সহায়তা করে এবং আপনি সেই টেমপ্লেটটি ডাইনামিক ডেটার সাথে বাইন্ড করে প্রদর্শন করতে পারেন।
Template Binding এর সোজা উদাহরণ:
ধরা যাক, আপনি একটি fruits array ডাইনামিকভাবে প্রদর্শন করতে চান।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Template Binding Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Fruits List</h2>
<!-- Template Binding Example -->
<ul data-bind="foreach: fruits">
<li>
<span data-bind="text: name"></span>
<button data-bind="click: $parent.removeFruit">Remove</button>
</li>
</ul>
<button data-bind="click: addFruit">Add Fruit</button>
<!-- Template for each fruit -->
<script type="text/html" id="fruitTemplate">
<div>
<span data-bind="text: name"></span>
<button data-bind="click: $parent.removeFruit">Remove</button>
</div>
</script>
<script>
// ViewModel
function AppViewModel() {
var self = this;
self.fruits = ko.observableArray([
{ name: "Apple" },
{ name: "Banana" },
{ name: "Orange" }
]);
// Add a new fruit
self.addFruit = function () {
self.fruits.push({ name: "Grapes" });
};
// Remove a fruit
self.removeFruit = function (fruit) {
self.fruits.remove(fruit);
};
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
2. Code Breakdown:
foreachBinding:data-bind="foreach: fruits": এটিfruitsarray এর প্রতিটি আইটেমের জন্য একটি<li>রেন্ডার করবে।- প্রতিটি
fruitঅবজেক্টের জন্য,<span>তেnameপ্রপার্টি বাইন্ড করা হয়েছে। - প্রতিটি আইটেমের পাশে একটি Remove বাটন রয়েছে, যা ক্লিক করার পর ঐ আইটেমটিকে array থেকে মুছে ফেলবে।
- Template Binding:
<script type="text/html" id="fruitTemplate">: এখানে একটি custom HTML টেমপ্লেট তৈরি করা হয়েছে। Template binding এর মাধ্যমে এই টেমপ্লেটটি ডাইনামিকভাবে রেন্ডার করা হবে।<ul data-bind="foreach: fruits">: এখানেfruitsarray এর আইটেমগুলো টেমপ্লেটটি ব্যবহার করে দেখানো হবে।
- Add and Remove Methods:
addFruitমেথডে নতুন ফ্রুট অ্যাড করা হচ্ছে।removeFruitমেথডে ঐ ফ্রুটটি অ্যারের মধ্যে থেকে মুছে ফেলা হচ্ছে।
3. Template Binding এর সুবিধা:
- Dynamic Content Rendering: ডাইনামিক কন্টেন্ট যেমন লিস্ট বা ডেটাবেসের ডেটা টেমপ্লেটের মাধ্যমে সহজে প্রদর্শন করা যায়।
- Maintainability: একই টেমপ্লেট বারবার ব্যবহার করা সম্ভব, ফলে কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ সহজ হয়।
- Separation of Concerns: View এবং Data (ViewModel) এর মধ্যে পার্থক্য বজায় রেখে UI এবং লজিক পৃথক করা সম্ভব।
4. আরও Complex Example with Template Binding:
ধরা যাক, আপনি একটি product list তৈরি করতে চান, যেখানে প্রতিটি প্রোডাক্টের নাম, মূল্য, এবং একটি remove বাটন থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Template Binding Complex Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Product List</h2>
<ul data-bind="foreach: products">
<li>
<span data-bind="text: name"></span> -
<span data-bind="text: price"></span>
<button data-bind="click: $parent.removeProduct">Remove</button>
</li>
</ul>
<script type="text/html" id="productTemplate">
<div>
<span data-bind="text: name"></span> -
<span data-bind="text: price"></span>
<button data-bind="click: $parent.removeProduct">Remove</button>
</div>
</script>
<script>
function AppViewModel() {
var self = this;
self.products = ko.observableArray([
{ name: "Laptop", price: "$1000" },
{ name: "Smartphone", price: "$600" },
{ name: "Tablet", price: "$400" }
]);
self.removeProduct = function (product) {
self.products.remove(product);
};
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Code Breakdown:
foreachBinding:<ul data-bind="foreach: products">: এখানেproductsarray এর প্রতিটি প্রোডাক্টের জন্য একটি আইটেম রেন্ডার করা হচ্ছে।- প্রতিটি প্রোডাক্টের জন্য
nameএবংpriceবাইন্ড করা হচ্ছে।
- Template Binding:
<script type="text/html" id="productTemplate">: এখানে আমরা একটি productTemplate টেমপ্লেট ডিফাইন করেছি। এই টেমপ্লেটটিforeachএর মাধ্যমে ডাইনামিকভাবে ব্যবহার করা হবে।
- Remove Button:
removeProductমেথডের মাধ্যমে আমরা একটি প্রোডাক্ট মুছে ফেলছি।
KnockoutJS এর Template Binding হল একটি শক্তিশালী ফিচার যা ডাইনামিক কন্টেন্ট এবং লিস্ট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। foreach এবং template বাইনডিংয়ের মাধ্যমে আপনি সহজেই ডেটা রেন্ডার করতে পারেন এবং যখন ডেটা পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়। এটি অ্যাপ্লিকেশনটির রক্ষণাবেক্ষণ এবং কোডের পুনঃব্যবহারযোগ্যতা সহজ করে।
Read more
