KnockoutJS তে nested components এবং data sharing হলো এমন দুটি গুরুত্বপূর্ণ বিষয় যা আপনাকে একাধিক UI component এর মধ্যে ডেটা শেয়ার করার জন্য সুবিধা প্রদান করে। আপনি যখন nested components তৈরি করেন, তখন আপনি parent-child কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে পারেন এবং এর মাধ্যমে অ্যাপ্লিকেশনের গঠন আরও ক্লিন এবং রক্ষণাবেক্ষণযোগ্য হয়।
KnockoutJS তে Nested Components এবং Data Sharing
KnockoutJS তে components হলো এমন স্বাধীন ইউনিট যেগুলি একটি নির্দিষ্ট UI অংশ এবং তার সাথে সম্পর্কিত ডেটা এবং লজিক ধারণ করে। আপনি যখন একটি কম্পোনেন্টকে আরেকটি কম্পোনেন্টে ইনক্লুড করেন, তখন আপনি data sharing করতে পারেন, অর্থাৎ parent কম্পোনেন্ট থেকে child কম্পোনেন্টে ডেটা পাঠাতে এবং vice versa।
Nested Components in KnockoutJS
1. Components এর সৃষ্টি:
KnockoutJS তে components তৈরি করতে, আপনাকে প্রথমে define করতে হবে একটি component এবং তারপর এটি applyBindings এর মাধ্যমে আপনার HTML এ ব্যবহার করতে হবে।
2. Parent এবং Child Components এর মধ্যে ডেটা শেয়ারিং:
এখানে, আমরা parent-child components এর মধ্যে ডেটা শেয়ার করার উদাহরণ দেখব।
Example: KnockoutJS Nested Components with Data Sharing
Step 1: Create Parent Component
প্রথমে একটি parent component তৈরি করা হবে যা একটি observable ডেটা ধারণ করবে এবং তা child component কে পাঠাবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Nested Components Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Parent Component</h2>
<!-- Parent Component -->
<div data-bind="component: { name: 'child-component', params: { message: parentMessage } }"></div>
<script>
// Parent ViewModel
function ParentViewModel() {
this.parentMessage = ko.observable("Hello from Parent Component!");
}
ko.components.register('child-component', {
viewModel: function(params) {
this.message = params.message; // Accepting data from parent component
},
template: '<div><h3>Child Component</h3><p data-bind="text: message"></p></div>'
});
// Activating the bindings
ko.applyBindings(new ParentViewModel());
</script>
</body>
</html>
Explanation:
- ParentViewModel: এখানে
parentMessageএকটি observable যা "Hello from Parent Component!" এই মান ধারণ করে। - Child Component: child-component কম্পোনেন্টটি parentMessage ডেটা গ্রহণ করে, এবং message প্রপার্টি হিসেবে এটি child component তে প্রদর্শিত হয়।
- Component Binding:
data-bind="component: { name: 'child-component', params: { message: parentMessage } }"দ্বারা parent থেকে child কম্পোনেন্টে message প্যারামিটারটি পাঠানো হচ্ছে।
Step 2: Create Child Component (Embedded in Parent)
উপরের উদাহরণে, child-component এর মধ্যে message প্রপার্টি প্রদর্শন করা হয়েছে। এটা parent component এর ডেটা ব্যবহার করে।
Child Component এর টেমপ্লেট অংশ:
<!-- Child Component Template -->
<div>
<h3>Child Component</h3>
<p data-bind="text: message"></p>
</div>
Step 3: Passing Data to Child Component
- Parent component এর
parentMessageডেটা child component তে পাঠানো হচ্ছে। child component এই ডেটা গ্রহণ করে এবং এটি তার UI তে প্রদর্শন করে।
Complex Example: Multiple Nested Components with Data Sharing
এখানে আরও একটি উদাহরণ দেওয়া হলো যেখানে multiple nested components এবং তাদের মধ্যে data sharing করা হচ্ছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Nested Components with Data Sharing</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Parent Component</h2>
<!-- Parent Component -->
<div data-bind="component: { name: 'parent-component', params: { message: parentMessage } }"></div>
<script>
// Parent ViewModel
function ParentViewModel() {
this.parentMessage = ko.observable("Message from Parent Component!");
}
ko.components.register('child-component', {
viewModel: function(params) {
this.message = params.message; // Accepting data from parent
},
template: '<div><h3>Child Component</h3><p data-bind="text: message"></p></div>'
});
ko.components.register('parent-component', {
viewModel: function(params) {
this.message = params.message;
this.childMessage = ko.observable("Hello from Child Component!");
},
template: `
<div>
<h3>Parent Component</h3>
<p data-bind="text: message"></p>
<div data-bind="component: { name: 'child-component', params: { message: childMessage } }"></div>
</div>`
});
// Activating the bindings
ko.applyBindings(new ParentViewModel());
</script>
</body>
</html>
Explanation:
- ParentViewModel:
parentMessageকে observable হিসেবে ডিফাইন করা হয়েছে। এটি child component এর মাধ্যমে message হিসেবে প্রদর্শিত হবে। - Parent and Child Components: parent-component এর ভিতরে একটি child-component রয়েছে, এবং এর মধ্যে childMessage নামক একটি observable রয়েছে, যেটি child component এ পাঠানো হচ্ছে।
How Data Sharing Works Between Parent and Child Components:
- Passing data to child: Parent component থেকে message বা childMessage এর মত observable ডেটা child component এ পাঠানো হয়।
- Data-binding in Child: Child component সেই ডেটাকে params এর মাধ্যমে গ্রহণ করে এবং
data-bind="text: message"এর মাধ্যমে UI তে দেখায়।
Best Practices for Using Nested Components in KnockoutJS:
- Use Observables for Dynamic Data: Parent এবং child components এর মধ্যে dynamic data শেয়ার করতে observable ডেটা ব্যবহার করুন, যাতে তা two-way binding এর মাধ্যমে স্বয়ংক্রিয়ভাবে আপডেট হয়।
- Avoid Tight Coupling: Parent এবং child components এর মধ্যে ডেটার আদান-প্রদান করুন, তবে তাদের মধ্যে tight coupling এড়িয়ে চলুন। মানে, child component শুধুমাত্র parent component এর কাছে ডেটা গ্রহণ করবে এবং সেটা পরিবর্তন করবে না।
- Use
paramsfor Data Passing: params হল একটি শক্তিশালী পদ্ধতি, যা component এর মধ্যে ডেটা পাস করার জন্য KnockoutJS তে ব্যবহার করা হয়। params এর মাধ্যমে ডেটা শেয়ার করা বেশি সহজ এবং সুষ্ঠু। - Component Reusability: যখন আপনি components তৈরি করেন, তখন সেগুলি reusable করার চেষ্টা করুন। অর্থাৎ, child component শুধু displaying করার জন্য ব্যবহৃত হবে, তবে এটি logic এর মধ্যে নির্দিষ্ট আচরণ বা পরিবর্তন করার জন্য ব্যবহৃত হবে না।
- Separation of Concerns: ViewModel এবং view এর মধ্যে পরিষ্কার বিভাজন রাখুন। ViewModel এর মধ্যে লজিক থাকতে হবে, তবে view শুধু ডেটা দেখানোর কাজ করবে।
KnockoutJS তে nested components এবং data sharing একটি শক্তিশালী উপায় যা আপনাকে আপনার অ্যাপ্লিকেশনে ডেটার প্রবাহ সহজ এবং কার্যকরীভাবে পরিচালনা করতে সহায়তা করে। ko.components.register এবং params এর মাধ্যমে parent এবং child components এর মধ্যে ডেটা সহজেই পাস করা যায়। এর মাধ্যমে আপনি modular এবং maintainable অ্যাপ্লিকেশন তৈরি করতে পারবেন যা সহজে রক্ষণাবেক্ষণ করা যায়।
Read more
