KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে। KnockoutJS এর মধ্যে data-binding এর সাহায্যে ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করা হয়। এর মধ্যে visible এবং hidden bindings খুবই গুরুত্বপূর্ণ, কারণ এগুলির মাধ্যমে আপনি UI উপাদানগুলোকে দৃশ্যমান (visible) অথবা অদৃশ্য (hidden) করতে পারেন, নির্ভর করে কোন ডেটার মান বা শর্তের উপর।
এখানে KnockoutJS তে visible এবং hidden bindings এর ব্যবহার নিয়ে আলোচনা করা হয়েছে।
1. visible Binding:
visible binding এর মাধ্যমে আপনি একটি HTML এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন। যখন নির্দিষ্ট শর্ত পূর্ণ হয়, তখন সেই এলিমেন্ট দৃশ্যমান হবে, আর শর্তটি পূর্ণ না হলে এলিমেন্টটি অদৃশ্য হবে (বাটারফ্লাই প্রভাবের মতো)।
visible Binding ব্যবহার:
<p data-bind="visible: isVisible">This paragraph is visible or hidden based on the value of isVisible.</p>
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
function AppViewModel() {
this.isVisible = ko.observable(true); // Initially the element is visible
// Method to toggle visibility
this.toggleVisibility = () => {
this.isVisible(!this.isVisible()); // Toggles between true and false
};
}
ko.applyBindings(new AppViewModel());
এখানে:
data-bind="visible: isVisible": এটিisVisibleobservable এর মান অনুযায়ী<p>ট্যাগের দৃশ্যমানতা নিয়ন্ত্রণ করবে।toggleVisibilityমেথডটিisVisibleএর মান পরিবর্তন করবে, যা<p>ট্যাগটি দৃশ্যমান বা অদৃশ্য করবে।
এখন, <p> ট্যাগটি isVisible এর মান অনুযায়ী ভিজিবল বা হিডেন হবে।
2. hidden Binding:
hidden binding visible binding এর বিপরীত, যেখানে এলিমেন্টটি শুধুমাত্র তখনই দৃশ্যমান হবে না, যখন শর্তটি পূর্ণ হয়। যদি শর্তটি পূর্ণ না হয়, তবে এলিমেন্টটি অদৃশ্য (hidden) হয়ে যাবে।
hidden Binding ব্যবহার:
<p data-bind="hidden: isHidden">This paragraph is hidden or shown based on the value of isHidden.</p>
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
function AppViewModel() {
this.isHidden = ko.observable(true); // Initially the element is hidden
// Method to toggle visibility
this.toggleVisibility = () => {
this.isHidden(!this.isHidden()); // Toggles between true and false
};
}
ko.applyBindings(new AppViewModel());
এখানে:
data-bind="hidden: isHidden": এটিisHiddenobservable এর মান অনুযায়ী<p>ট্যাগের গোপনীয়তা (visibility) নিয়ন্ত্রণ করবে।toggleVisibilityমেথডটিisHiddenএর মান পরিবর্তন করবে, যা<p>ট্যাগটি হিডেন বা শো করবে।
এখন, <p> ট্যাগটি isHidden এর মান অনুযায়ী হিডেন বা ভিজিবল হবে।
3. visible এবং hidden Binding এর মধ্যে পার্থক্য:
| বিশেষত্ব | visible Binding | hidden Binding |
|---|---|---|
| কাজ | UI উপাদানকে দৃশ্যমান (visible) বা অদৃশ্য (hidden) করে। | UI উপাদানকে অদৃশ্য (hidden) বা দৃশ্যমান (visible) করে। |
| ডিফল্ট আচরণ | উপাদানটি দৃশ্যমান বা অদৃশ্য হয় নির্ভর করে observable এর মান। | উপাদানটি অদৃশ্য বা দৃশ্যমান হয় নির্ভর করে observable এর মান। |
| স্টাইলিং | display: none; ব্যবহার করা হয় যখন উপাদানটি অদৃশ্য থাকে। | visibility: hidden; ব্যবহার করা হয় যখন উপাদানটি অদৃশ্য থাকে। |
| আচরণ | visible এর জন্য উপাদানটি DOM থেকে সরানো হয় না। | hidden এর জন্য উপাদানটি visibility প্রোপার্টি পরিবর্তন করে। |
4. UI তে visible এবং hidden Binding এর উদাহরণ:
visible Binding উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS visible binding example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Click the button to toggle the visibility of the text</h2>
<!-- Text visibility controlled by isVisible observable -->
<p data-bind="visible: isVisible">This paragraph is visible when isVisible is true.</p>
<!-- Button to toggle visibility -->
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
<script>
function AppViewModel() {
this.isVisible = ko.observable(true); // Initially visible
// Method to toggle visibility
this.toggleVisibility = () => {
this.isVisible(!this.isVisible()); // Toggle between true and false
};
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
isVisibleএর মান পরিবর্তন করার মাধ্যমে প্যারাগ্রাফটি দৃশ্যমান বা অদৃশ্য হবে।
hidden Binding উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS hidden binding example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Click the button to toggle the hidden status of the text</h2>
<!-- Text visibility controlled by isHidden observable -->
<p data-bind="hidden: isHidden">This paragraph is hidden when isHidden is true.</p>
<!-- Button to toggle hidden status -->
<button data-bind="click: toggleVisibility">Toggle Hidden</button>
<script>
function AppViewModel() {
this.isHidden = ko.observable(true); // Initially hidden
// Method to toggle hidden status
this.toggleVisibility = () => {
this.isHidden(!this.isHidden()); // Toggle between true and false
};
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
isHiddenএর মান পরিবর্তন করার মাধ্যমে প্যারাগ্রাফটি গোপন বা দৃশ্যমান হবে।
KnockoutJS তে visible এবং hidden bindings খুবই কার্যকরী ফিচার, যা আপনার UI এর অংশগুলির দৃশ্যমানতা নিয়ন্ত্রণ করতে সহায়তা করে। visible binding দ্বারা আপনি কোন উপাদান দৃশ্যমান করতে বা গোপন করতে পারেন যখন ডেটার মান নির্দিষ্ট শর্ত পূর্ণ হয়, এবং hidden binding দ্বারা আপনি উপাদানটি গোপন করে রাখতে পারেন, যখন নির্দিষ্ট শর্ত পূর্ণ না হয়। এই ফিচারগুলি ইউজার ইন্টারফেসের ডায়নামিক আচরণ তৈরি করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
Read more
