KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে এবং এর মাধ্যমে আপনি data binding, dependency tracking, এবং UI updates সহজে পরিচালনা করতে পারেন। KnockoutJS তে custom binding তৈরি করা এবং কনফিগার করা একটি খুবই শক্তিশালী ফিচার, যার মাধ্যমে আপনি আপনার প্রজেক্টে নতুন বায়ন্ডিং তৈরি করতে পারেন যা আপনার প্রয়োজনীয়তা অনুযায়ী কাজ করবে।
এখানে KnockoutJS এ Custom Binding তৈরি করা এবং কনফিগার করা নিয়ে বিস্তারিত আলোচনা করা হবে।
1. Custom Binding কী?
Custom Binding KnockoutJS তে এমন একটি ফিচার যা আপনাকে আপনার নিজের binding handler তৈরি করার সুযোগ দেয়। আপনি নতুন behavior এবং UI interaction এর জন্য একটি custom binding তৈরি করতে পারেন, যেটি বিদ্যমান KnockoutJS বায়ন্ডিংয়ের সাথে একত্রে ব্যবহার করা যাবে।
2. Custom Binding তৈরি করার জন্য KnockoutJS Syntax:
KnockoutJS তে custom binding তৈরি করতে, আপনাকে একটি binding handler তৈরি করতে হবে। একটি binding handler একটি object যা অন্তত তিনটি প্রপার্টি ধারণ করতে পারে:
- init: এটি ফাংশনটি প্রথমবার যখন binding প্রয়োগ হয় তখন একবারই চলে। এটি DOM উপাদান প্রস্তুত করতে ব্যবহৃত হয়।
- update: এটি binding এর উপর নির্ভরশীল কোনো observable বা কম্পিউটেড value পরিবর্তিত হলে চলে। এটি DOM আপডেট করতে ব্যবহৃত হয়।
3. Custom Binding এর উদাহরণ:
ধরা যাক, আমরা একটি tooltip যোগ করতে চাই যা একটি data-tooltip এট্রিবিউট থেকে টেক্সট নেবে এবং ব্যবহারকারী মাউস হোভার করার সময় টুলটিপ দেখাবে।
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Custom Binding Example</title>
<style>
.tooltip {
display: none;
position: absolute;
background-color: #333;
color: white;
padding: 5px;
border-radius: 5px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS Custom Binding Example</h2>
<div>
<button data-bind="tooltip: 'Click to submit'">Submit</button>
</div>
<script>
// Define custom tooltip binding
ko.bindingHandlers.tooltip = {
init: function(element, valueAccessor) {
// Tooltip text to be shown
var tooltipText = ko.unwrap(valueAccessor()); // Get the value passed to the binding
// Create tooltip element
var tooltip = document.createElement('span');
tooltip.className = 'tooltip';
tooltip.textContent = tooltipText;
// Append the tooltip to the element
element.appendChild(tooltip);
// Mouse hover event to show the tooltip
element.addEventListener('mouseenter', function() {
tooltip.style.display = 'block';
tooltip.style.top = (element.offsetTop + element.offsetHeight) + 'px';
tooltip.style.left = element.offsetLeft + 'px';
});
// Mouse leave event to hide the tooltip
element.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
}
};
// Apply Knockout bindings
ko.applyBindings();
</script>
</body>
</html>
ব্যাখ্যা:
- Custom Binding Handler (tooltip):
ko.bindingHandlers.tooltipএ আমরা একটি নতুন binding তৈরি করেছি যার নামtooltip। এটিinitফাংশন ব্যবহার করে tooltip তৈরি করে এবং mouseenter এবং mouseleave ইভেন্টের মাধ্যমে টুলটিপ দেখানো এবং লুকানো হয়।valueAccessor()ফাংশনটি ব্যবহার করে আমরা tooltip এর জন্য পাস করা টেক্সট বের করি।
- Binding Syntax:
data-bind="tooltip: 'Click to submit'"এখানে tooltip কাস্টম বায়ন্ডিং ব্যবহার করা হয়েছে এবং'Click to submit'হল টুলটিপের টেক্সট যা DOM-এ প্রদর্শিত হবে।
- Styling:
- CSS এ টুলটিপের জন্য স্টাইল তৈরি করা হয়েছে যাতে এটি সঠিকভাবে প্রদর্শিত হয় এবং
display: noneদ্বারা শুরুতে এটি আড়াল থাকে।
- CSS এ টুলটিপের জন্য স্টাইল তৈরি করা হয়েছে যাতে এটি সঠিকভাবে প্রদর্শিত হয় এবং
- Mouse Events:
- mouseenter ইভেন্টে টুলটিপটি প্রদর্শিত হয় এবং mouseleave ইভেন্টে টুলটিপটি লুকানো হয়।
4. Complex Custom Binding Example:
আমরা যদি কাস্টম বায়ন্ডিং আরও জটিল করতে চাই, যেমন drag-and-drop ফিচার যুক্ত করা, তাহলে নিচের মত কাজ করতে পারি।
HTML (Drag and Drop):
<div>
<div data-bind="draggable: { item: item1, container: '#container' }" class="draggable-item">
Drag me!
</div>
<div id="container" style="height: 200px; border: 1px solid black;">
Drop here
</div>
</div>
JavaScript (Custom Binding for Drag and Drop):
ko.bindingHandlers.draggable = {
init: function(element, valueAccessor) {
var options = valueAccessor();
var item = options.item;
var container = document.querySelector(options.container);
// Drag start event
element.setAttribute('draggable', 'true');
element.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', item);
});
// Drag over event to allow drop
container.addEventListener('dragover', function(event) {
event.preventDefault(); // Allow drop
});
// Drop event to handle drop
container.addEventListener('drop', function(event) {
event.preventDefault();
alert(item + ' dropped!');
});
}
};
ব্যাখ্যা:
draggableCustom Binding:- এখানে
draggableএকটি কাস্টম বায়ন্ডিং যা একটি drag-and-drop ফিচার বাস্তবায়ন করেছে। initফাংশনে, dragstart, dragover, এবং drop ইভেন্টগুলো হ্যান্ডল করা হচ্ছে।itemএবংcontainerপ্যারামিটার হিসেবে পাঠানো হচ্ছে, যা ড্র্যাগ আইটেম এবং ড্রপ কন্টেইনারের মধ্যে যোগাযোগ স্থাপন করছে।
- এখানে
- HTML Element:
data-bind="draggable: { item: item1, container: '#container' }"এর মাধ্যমে, drag-and-drop ইন্টারঅ্যাকশন তৈরি করা হচ্ছে, যেখানেitem1ড্র্যাগ করা যাবে এবং#containerএ ড্রপ করা যাবে।
5. Advantages of Using Custom Bindings:
- Reusable Behavior: একবার কাস্টম বায়ন্ডিং তৈরি করলে আপনি সেগুলি সহজেই বিভিন্ন জায়গায় ব্যবহার করতে পারেন।
- Separation of Concerns: কাস্টম বায়ন্ডিংয়ের মাধ্যমে UI এর আচরণ (behavior) আলাদা রাখা যায়, যার ফলে কোড আরও পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য হয়।
- Complex Interactions: KnockoutJS এর কাস্টম বায়ন্ডিংয়ের মাধ্যমে আপনি জটিল ইউআই ইন্টারঅ্যাকশন (যেমন ড্র্যাগ-এন্ড-ড্রপ, টুলটিপ, ডায়নামিক স্টাইলিং ইত্যাদি) সহজে বাস্তবায়ন করতে পারেন।
- Maintainable Code: কোডের পুনঃব্যবহারযোগ্যতা এবং মডুলারিটি নিশ্চিত করে, কারণ আপনি UI ইন্টারঅ্যাকশন এবং ডেটা-বাইন্ডিং লজিক আলাদা করতে পারেন।
KnockoutJS তে Custom Binding তৈরি করা একটি অত্যন্ত শক্তিশালী ফিচার যা আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনে কাস্টম ইন্টারঅ্যাকশন তৈরি করার ক্ষমতা দেয়। এটি MVVM আর্কিটেকচারে ডেটা এবং UI এর মধ্যে সম্পর্ককে আরও ভালোভাবে ম্যানেজ করতে সহায়তা করে। আপনি drag-and-drop, tooltips, dynamic form behavior ইত্যাদি কাস্টম ইন্টারঅ্যাকশন তৈরি করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তুলবে।
Read more
