KnockoutJS একটি JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) প্যাটার্ন অনুসরণ করে এবং ওয়েব অ্যাপ্লিকেশনগুলিতে ডেটা বাইন্ডিং এবং UI কন্ট্রোল সহজ করে তোলে। এটি খুবই সহজ এবং কার্যকরী উপায়ে UI এবং ডেটার মধ্যে সম্পর্ক স্থাপন করতে সহায়তা করে। এর মাধ্যমে আপনি two-way data binding, dependency tracking, এবং dynamic UI updates করতে পারবেন।
এখানে প্রথম KnockoutJS অ্যাপ তৈরি করার পুরো প্রক্রিয়া আলোচনা করা হবে।
1. KnockoutJS এর ইনস্টলেশন:
KnockoutJS কে আপনার প্রকল্পে অন্তর্ভুক্ত করার দুটি সাধারণ উপায় রয়েছে:
a. CDN ব্যবহার করে:
এটি সবচেয়ে সহজ এবং দ্রুত পদ্ধতি। আপনি KnockoutJS লাইব্রেরিটি একটি CDN (Content Delivery Network) থেকে লোড করতে পারেন। নিচে এর উদাহরণ দেওয়া হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First KnockoutJS App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>
<div>
<label>Your Name: </label>
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
<h2>Hello, <span data-bind="text: name"></span>!</h2>
</div>
<script>
// KnockoutJS model
function AppViewModel() {
this.name = ko.observable("John Doe");
}
// Activating KnockoutJS
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
b. KnockoutJS লাইব্রেরি ফাইল ডাউনলোড করা:
আপনি KnockoutJS লাইব্রেরি আপনার প্রজেক্টে ডাউনলোড করে এবং স্থানীয়ভাবে ব্যবহার করতে পারেন। এর জন্য আপনি KnockoutJS এর অফিসিয়াল ওয়েবসাইট থেকে লাইব্রেরি ডাউনলোড করতে পারবেন এবং knockout.js ফাইলটি আপনার প্রজেক্টের ফোল্ডারে রাখবেন।
<script src="path/to/knockout.js"></script>
2. প্রথম KnockoutJS অ্যাপ তৈরি করা:
এখন আমরা একটি সহজ KnockoutJS অ্যাপ তৈরি করব যেখানে ব্যবহারকারী একটি টেক্সট ইনপুট দিবেন এবং সেই ইনপুটটি তৎক্ষণাৎ UI তে দেখানো হবে। এটি KnockoutJS এর two-way data binding এর ব্যবহার করবে।
KnockoutJS অ্যাপ উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First KnockoutJS App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>
<div>
<label for="name">Enter Your Name: </label>
<input type="text" id="name" data-bind="value: name, valueUpdate: 'input'" />
<p>Hello, <span data-bind="text: name"></span>!</p>
</div>
<script>
// ViewModel: Defines the data and behavior for the app
function AppViewModel() {
this.name = ko.observable("John Doe"); // Knockout observable for data binding
}
// Apply the bindings (connecting the ViewModel to the view)
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
3. ব্যাখ্যা:
- Knockout Observable:
this.name = ko.observable("John Doe");এখানেnameএকটি observable তৈরি হয়েছে। এর মান পরিবর্তন হলে এটি UI তে স্বয়ংক্রিয়ভাবে আপডেট হবে।- Observable হলো একটি বিশেষ KnockoutJS ফিচার যা ডেটার মান পরিবর্তন হওয়ার সাথে সাথে UI তে সেই পরিবর্তনটি দেখাবে।
- Data-Binding:
data-bind="value: name": এখানে আমরাinputএলিমেন্টটি Knockout এরnameঅবজার্ভেবল এর সাথে বাইন্ড করছি। এটি ব্যবহারকারী যখন ইনপুট দিবে তখনnameএর মান আপডেট হবে।data-bind="text: name": এখানে span এলিমেন্টেnameএর মান দেখানো হচ্ছে। যখনnameএর মান পরিবর্তিত হবে, তখন এটি UI তে স্বয়ংক্রিয়ভাবে আপডেট হবে।
valueUpdate: 'input':- এটি ইনপুট ফিল্ডের মান পরিবর্তন করার জন্য instant update সেট করে। অর্থাৎ, ইউজার যতবার ইনপুট পরিবর্তন করবেন, ততবার সেই পরিবর্তন real-time UI তে দেখা যাবে।
4. আরও কিছু KnockoutJS ফিচার:
KnockoutJS আরও কিছু শক্তিশালী ফিচার প্রদান করে, যেমন:
a. Computed Observables:
Computed Observables এমন একটি বৈশিষ্ট্য যা একাধিক observables থেকে একটি মান গণনা করে। যখন কোনো একটি observable পরিবর্তিত হয়, তখন computed মানও আপডেট হয়ে যাবে।
function AppViewModel() {
this.firstName = ko.observable("John");
this.lastName = ko.observable("Doe");
// computed observable to combine first name and last name
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
ko.applyBindings(new AppViewModel());
এখানে, fullName একটি computed observable যা firstName এবং lastName থেকে মান গ্রহণ করে এবং যখনই এই দুটি observable আপডেট হয়, fullName এর মানও স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
b. Array Binding:
KnockoutJS তে অ্যারে ডেটার উপর ভিত্তি করে UI তৈরি করতে foreach বাইন্ডিং ব্যবহার করা হয়।
<ul data-bind="foreach: items">
<li data-bind="text: $data"></li>
</ul>
<script>
function AppViewModel() {
this.items = ko.observableArray(["Apple", "Banana", "Orange"]);
}
ko.applyBindings(new AppViewModel());
</script>
এখানে, ko.observableArray() ব্যবহার করে একটি অ্যারে তৈরি করা হয়েছে এবং foreach বাইন্ডিং ব্যবহার করে সেই অ্যারে থেকে আইটেমগুলো UI তে দেখানো হচ্ছে।
c. Event Binding:
KnockoutJS তে UI ইভেন্ট যেমন click, keyup ইত্যাদির জন্য ইভেন্ট বাইন্ডিংও সহজ।
<button data-bind="click: sayHello">Click me!</button>
<script>
function AppViewModel() {
this.sayHello = function() {
alert("Hello, Knockout!");
};
}
ko.applyBindings(new AppViewModel());
</script>
এখানে, click ইভেন্টে sayHello ফাংশনটি কল করা হচ্ছে। এই ফাংশনটি একটি আলার্ট বক্স প্রদর্শন করবে।
KnockoutJS এর মাধ্যমে আপনি খুব সহজে two-way data binding, computed observables, array binding, এবং event handling এর মতো শক্তিশালী ফিচারগুলি ব্যবহার করে ইন্টারঅ্যাক্টিভ ও ডায়নামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন। এটি MVVM প্যাটার্ন অনুসরণ করে, যার মাধ্যমে ডেটা এবং UI এর মধ্যে শক্তিশালী সম্পর্ক স্থাপন করা যায়।
এখন, আপনি যদি KnockoutJS দিয়ে একটি অ্যাপ্লিকেশন তৈরি করতে চান, তবে এই মৌলিক ধারণাগুলির মাধ্যমে আপনি দ্রুত শুরু করতে পারবেন।
Read more
