KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে এবং ডেটা-বাইন্ডিং সিস্টেমের মাধ্যমে ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করে। KnockoutJS তে Template Binding ব্যবহার করে আপনি dynamic content এবং conditional rendering সহ iteration (looping) পরিচালনা করতে পারেন।
এই গাইডে আমরা KnockoutJS Templates এর মধ্যে Iteration এবং Conditionals ব্যবহারের বিস্তারিত আলোচনা করব।
1. KnockoutJS Template Binding:
Template Binding হল KnockoutJS এর একটি শক্তিশালী বৈশিষ্ট্য, যা HTML টেমপ্লেটের মাধ্যমে ডাইনামিক কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি observable arrays এর মাধ্যমে বিভিন্ন আইটেম লুপ করতে এবং conditionals এর মাধ্যমে নির্দিষ্ট কন্টেন্ট প্রদর্শন করতে পারেন।
Template Binding উদাহরণ:
<!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</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS Template Binding Example</h2>
<div data-bind="template: {name: 'fruitTemplate', foreach: fruits}"></div>
<script type="text/html" id="fruitTemplate">
<div>
<p data-bind="text: $data"></p>
</div>
</script>
<script>
function AppViewModel() {
this.fruits = ko.observableArray(["Apple", "Banana", "Orange", "Grapes"]); // Observable array for fruits
}
ko.applyBindings(new AppViewModel()); // Apply bindings
</script>
</body>
</html>
এখানে:
- Template Binding ব্যবহার করে
fruitTemplateটেমপ্লেটের মাধ্যমে fruits observable array এর সমস্ত আইটেম রেন্ডার করা হয়েছে। foreachব্যান্ডিংটিfruitsarray এর প্রতিটি আইটেমের জন্য টেমপ্লেট লুপ করবে এবং তা প্রদর্শন করবে।
2. Iteration (Looping) with Template Binding:
KnockoutJS তে iteration বা looping করার জন্য foreach binding ব্যবহার করা হয়। এটি array বা collection এর প্রতিটি আইটেমের উপর কাজ করে এবং নির্দিষ্ট HTML টেমপ্লেটকে প্রতিটি আইটেমের জন্য রেন্ডার করে।
Iteration (Looping) উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Iteration Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS Iteration Example</h2>
<ul data-bind="foreach: fruits">
<li data-bind="text: $data"></li>
</ul>
<script>
function AppViewModel() {
this.fruits = ko.observableArray(["Apple", "Banana", "Orange", "Grapes"]); // Observable array for fruits
}
ko.applyBindings(new AppViewModel()); // Apply bindings
</script>
</body>
</html>
এখানে:
foreachbinding এর মাধ্যমে KnockoutJSfruitsobservable array এর প্রতিটি আইটেম লুপ করে একটি<li>ট্যাগের মধ্যে প্রদর্শন করবে।$dataব্যবহার করে প্রত্যেক আইটেমকে টেমপ্লেটে প্রদর্শন করা হয়েছে।
Using Indexed Iteration (With Index):
<ul data-bind="foreach: {data: fruits, as: 'fruit', index: 'fruitIndex'}">
<li data-bind="text: fruit + ' is at index ' + fruitIndex"></li>
</ul>
এখানে:
indexব্যবহার করে প্রতিটি আইটেমের ইনডেক্স পাওয়া যাচ্ছে, যাfruitIndexদ্বারা অ্যাক্সেস করা হচ্ছে।
3. Conditionals in KnockoutJS with Template Binding:
KnockoutJS তে conditionals বা শর্তসাপেক্ষ ভিত্তিতে ডেটা প্রদর্শন করতে if এবং ifnot bindings ব্যবহার করা হয়। এটি ব্যবহার করে আপনি নির্দিষ্ট শর্তে UI রেন্ডার করতে পারেন।
Conditionals উদাহরণ (if and ifnot):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Conditionals Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS Conditionals Example</h2>
<div data-bind="if: isVisible">
<p>This content is visible because isVisible is true!</p>
</div>
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
<script>
function AppViewModel() {
this.isVisible = ko.observable(true); // Observable for visibility
// Method to toggle visibility
this.toggleVisibility = () => {
this.isVisible(!this.isVisible()); // Toggle between true and false
};
}
ko.applyBindings(new AppViewModel()); // Apply bindings
</script>
</body>
</html>
এখানে:
ifbinding ব্যবহার করা হয়েছে, যার মাধ্যমেisVisibleobservable এর মান যদিtrueহয়, তবে<div>এলিমেন্ট রেন্ডার হবে।toggleVisibilityমেথডে ক্লিক করলেisVisibleএর মান পরিবর্তিত হবে এবং UI আপডেট হবে।
Conditionals with ifnot:
<div data-bind="ifnot: isVisible">
<p>This content is visible because isVisible is false!</p>
</div>
এখানে:
ifnotব্যবহার করা হয়েছে, যাisVisibleযদিfalseহয়, তখন HTML এলিমেন্টটি রেন্ডার করবে।
4. Combining Iteration and Conditionals:
KnockoutJS তে foreach এবং if / ifnot binding একসাথে ব্যবহার করে আপনি ডেটার উপর ভিত্তি করে শর্তসাপেক্ষ তালিকা প্রদর্শন করতে পারেন।
Combining Iteration and Conditionals উদাহরণ:
<ul data-bind="foreach: fruits">
<li data-bind="text: $data, visible: $data !== 'Banana'"></li>
</ul>
এখানে:
foreachbinding এর মাধ্যমে সব ফলের নাম প্রদর্শন করা হচ্ছে এবংvisiblebinding ব্যবহার করেBananaফলটি না দেখানোর শর্ত দেওয়া হয়েছে।
KnockoutJS তে Templates এর মাধ্যমে Iteration এবং Conditionals ব্যবহার করে আপনি সহজেই ডাইনামিক এবং ইন্টারঅ্যাকটিভ কন্টেন্ট তৈরি করতে পারেন।
foreachদিয়ে আপনি অ্যারে বা লিস্ট এর আইটেম লুপ করতে পারেন।ifএবংifnotদিয়ে আপনি শর্তসাপেক্ষে UI উপাদান রেন্ডার করতে পারেন।- KnockoutJS Templates ব্যবহার করে ডেটা-বাইন্ডিং এর মাধ্যমে ডাইনামিক UI তৈরি করা সহজ হয় এবং আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করে তোলে।
Read more
