KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা Model-View-ViewModel (MVVM) ডিজাইন প্যাটার্ন অনুসরণ করে এবং ব্যবহারকারীর ইন্টারফেসের সাথে ডেটা বাঁধার জন্য data-binding এবং dependency tracking ফিচার প্রদান করে। KnockoutJS তে আপনার HTML ইলিমেন্টগুলোর সাথে ডেটা ইন্টারঅ্যাক্ট করতে পারেন এবং কোন পরিবর্তন ঘটলে স্বয়ংক্রিয়ভাবে UI আপডেট হয়ে যাবে।
এই গাইডে HTML ফাইলের মধ্যে KnockoutJS ইন্টিগ্রেশন কিভাবে করবেন এবং একটি সাধারণ KnockoutJS অ্যাপ তৈরি করবেন, তা আলোচনা করা হবে।
1. KnockoutJS লাইব্রেরি অন্তর্ভুক্ত করা:
প্রথমে, KnockoutJS লাইব্রেরি আপনার প্রজেক্টে যুক্ত করতে হবে। আপনি এটি CDN অথবা ফাইল ডাউনলোড করে ব্যবহার করতে পারেন।
CDN ব্যবহার করে KnockoutJS অন্তর্ভুক্ত করা:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<!-- KnockoutJS এর মধ্যে প্রথম অ্যাপ -->
<div>
<h2>KnockoutJS Example</h2>
<!-- Text binding example -->
<p>Hello, <span data-bind="text: name"></span>!</p>
<!-- Input binding example -->
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
<!-- Button binding example -->
<button data-bind="click: changeName">Change Name</button>
</div>
<script>
// ViewModel (VM) তৈরি
function AppViewModel() {
this.name = ko.observable("John Doe"); // 'name' একটি observable
// 'changeName' মেথড
this.changeName = () => {
this.name("Jane Doe"); // নাম পরিবর্তন করা
};
}
// ViewModel ইনস্ট্যান্স তৈরি এবং KnockoutJS এর সাথে বেঁধে দেওয়া
ko.applyBindings(new AppViewModel()); // AppViewModel কে ভিউয়ের সাথে বেঁধে দেওয়া
</script>
</body>
</html>
এখানে:
- KnockoutJS এর CDN লিঙ্ক ব্যবহার করা হয়েছে। এটি ইন্টারনেটের মাধ্যমে লাইব্রেরি আপনার অ্যাপ্লিকেশনে যুক্ত করে।
- HTML Elements-এ
data-bindএট্রিবিউট ব্যবহার করে, আমরা KnockoutJS এর ডেটা-বাইন্ডিং ফিচারকে অ্যাপ্লিকেশনের UI এর সাথে যুক্ত করেছি। - ViewModel এর মধ্যে একটি observable (
this.name) ব্যবহার করা হয়েছে, যাতে নাম পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়।
2. KnockoutJS এর প্রধান বৈশিষ্ট্য এবং ডেটা-বাইন্ডিং:
KnockoutJS এর মধ্যে তিনটি প্রধান বৈশিষ্ট্য রয়েছে:
- Observables: এটি ডেটাকে ট্র্যাক করে এবং যখন ডেটার মান পরিবর্তিত হয় তখন UI আপডেট করে।
- Computed Observables: এটি এমন observables যা অন্য observables এর মানের উপর ভিত্তি করে মান গণনা করে।
- Bindings: HTML এবং ViewModel এর মধ্যে ডেটা-বাইন্ডিং তৈরি করার জন্য
data-bindব্যবহার করা হয়।
a. Observables:
Observables KnockoutJS এর মধ্যে একটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ডেটা ট্র্যাক করে এবং যখন ডেটার মান পরিবর্তিত হয়, তখন UI এর রেন্ডারিং স্বয়ংক্রিয়ভাবে আপডেট করে।
function AppViewModel() {
this.name = ko.observable("John Doe"); // এটি একটি observable
}
এখানে this.name একটি observable যা পরবর্তীতে পরিবর্তিত হলে UI রিফ্রেশ হবে।
b. Computed Observables:
Computed Observables এমন একটি ফিচার যা অন্য observables এর মানের উপর ভিত্তি করে নতুন মান গণনা করে।
function AppViewModel() {
this.firstName = ko.observable("John");
this.lastName = ko.observable("Doe");
// Computed observable
this.fullName = ko.computed(() => {
return this.firstName() + " " + this.lastName();
});
}
এখানে fullName একটি computed observable, যা firstName এবং lastName এর মানের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে আপডেট হবে।
c. Bindings:
KnockoutJS তে data-bind এট্রিবিউট ব্যবহার করে HTML এলিমেন্টগুলোর সাথে ডেটা বেঁধে দেওয়া হয়।
<p data-bind="text: fullName"></p> <!-- এটি fullName কে HTML প্যারে প্রদর্শন করবে -->
<input type="text" data-bind="value: firstName, valueUpdate: 'input'" />
এখানে:
text: fullName: এটিfullNameobservable এর মানকে HTML প্যারে দেখাবে।value: firstName: এটি ইনপুট ফিল্ডেfirstNameobservable এর মান প্রদর্শন করবে এবং এটির মান পরিবর্তন হলেfirstNameআপডেট হবে।
3. আরও উন্নত KnockoutJS ফিচার:
a. Arrays এবং Loops:
KnockoutJS তে observable arrays এবং loops (যেমন: foreach) ব্যবহার করা যায়, যা ডাইনামিক ডেটার তালিকা প্রদর্শন করতে সহায়তা করে।
<ul data-bind="foreach: names">
<li data-bind="text: $data"></li>
</ul>
function AppViewModel() {
this.names = ko.observableArray(["John", "Jane", "Doe"]);
}
এখানে:
observableArrayব্যবহার করে ডেটার একটি তালিকা তৈরি করা হয়েছে, এবংforeachবায়ন্ডিং এর মাধ্যমে তা HTML এ প্রদর্শিত হচ্ছে।
b. Event Bindings:
KnockoutJS তে event bindings ব্যবহার করে বিভিন্ন UI ইভেন্টের উপর ভিত্তি করে কার্যক্রম চালানো যায়।
<button data-bind="click: changeName">Change Name</button>
function AppViewModel() {
this.name = ko.observable("John Doe");
// Click ইভেন্ট হ্যান্ডলার
this.changeName = () => {
this.name("Jane Doe");
};
}
এখানে click ইভেন্ট ব্যবহার করা হয়েছে, যখন ব্যবহারকারী বাটনে ক্লিক করবে তখন changeName ফাংশন কল হবে এবং নাম পরিবর্তিত হবে।
4. FuelPHP এ KnockoutJS ইন্টিগ্রেশন:
FuelPHP অ্যাপ্লিকেশনেও আপনি KnockoutJS ব্যবহার করতে পারেন। FuelPHP এর টেমপ্লেটিং ইঞ্জিন এবং ViewModel এর সাথে KnockoutJS ব্যবহার করে আপনি ডেটা-বাইন্ডিং এবং ডায়নামিক UI তৈরি করতে পারবেন।
FuelPHP ও KnockoutJS একত্রিত করার উদাহরণ:
- FuelPHP Controller:
class Controller_Home extends Controller
{
public function action_index()
{
$data = array(
'firstName' => 'John',
'lastName' => 'Doe',
);
return Response::forge(View::forge('home/index', $data));
}
}
- FuelPHP View (KnockoutJS):
<!-- fuel/app/views/home/index.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS with FuelPHP</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS Example with FuelPHP</h2>
<p>Full Name: <span data-bind="text: fullName"></span></p>
<input type="text" data-bind="value: firstName" />
<input type="text" data-bind="value: lastName" />
<script>
function AppViewModel() {
this.firstName = ko.observable("<?php echo $firstName; ?>");
this.lastName = ko.observable("<?php echo $lastName; ?>");
this.fullName = ko.computed(() => {
return this.firstName() + " " + this.lastName();
});
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে, FuelPHP Controller থেকে firstName এবং lastName ডেটা পাঠানো হচ্ছে, যা KnockoutJS এর মাধ্যমে ডেটা-বাইন্ডিং হয়ে UI তে প্রদর্শিত হচ্ছে।
KnockoutJS একটি শক্তিশালী লাইব্রেরি যা MVVM ডিজাইন প্যাটার্নে কাজ করে এবং data-binding এবং dependency tracking এর মাধ্যমে আপনার ওয়েব অ্যাপ্লিকেশনগুলির ইউজার ইন্টারফেস উন্নত করে। FuelPHP এর সাথে ইন্টিগ্রেট করে আপনি KnockoutJS এর ডেটা-বাইন্ডিং, কম্পিউটেড ভ্যালু, এবং অন্যান্য শক্তিশালী ফিচার ব্যবহার করতে পারেন। HTML ফাইলের মধ্যে KnockoutJS ইন্টিগ্রেশন করে, আপনি আপনার অ্যাপ্লিকেশনের ডাইনামিক ফিচারগুলি সহজেই ম্যানেজ করতে পারবেন।
Read more
