KnockoutJS এর Template Binding

Web Development - নকআউটজেএস (KnockoutJS)

323

KnockoutJS তে Template Binding একটি শক্তিশালী ফিচার যা আপনাকে ডাইনামিকভাবে HTML টেমপ্লেট রেন্ডার করতে দেয়, যেখানে আপনি একাধিক ভিন্ন ডেটা বা UI উপাদানগুলি একই ধরণের স্ট্রাকচারে প্রদর্শন করতে পারেন। Template binding এর মাধ্যমে আপনি foreach, if, with ইত্যাদি লজিক্যাল রেন্ডারিং করতে পারবেন, যা আপনাকে ডাইনামিকভাবে টেমপ্লেটের অংশগুলিকে আপডেট করতে সাহায্য করে।

KnockoutJS এর Template Binding:

KnockoutJS তে template binding এর মাধ্যমে আপনি টেমপ্লেটের মধ্যে ডেটার উপর ভিত্তি করে লজিকাল কন্ট্রোল তৈরি করতে পারেন এবং ব্যবহারকারীর ইনপুট বা ডেটার পরিবর্তনের ভিত্তিতে তা আপডেট করতে পারেন।

Common Template Bindings in KnockoutJS:

KnockoutJS তে আপনি প্রধানত ৩টি টেমপ্লেট বাইনডিং ব্যবহার করবেন:

foreach Binding: একটি অ্যারে বা আইটেমের তালিকা প্রদর্শন করার জন্য ব্যবহৃত হয়।
if Binding: কোনো কন্ডিশন অনুযায়ী টেমপ্লেট রেন্ডার করার জন্য ব্যবহৃত হয়।
with Binding: নির্দিষ্ট একটি অবজেক্টের প্রপার্টি অথবা ডেটা ব্যবহার করে টেমপ্লেট রেন্ডার করার জন্য ব্যবহৃত হয়।

1. `foreach` Binding

foreach binding ব্যবহারের মাধ্যমে আপনি কোনো অ্যারে বা তালিকার উপাদানগুলো ডাইনামিকভাবে রেন্ডার করতে পারেন। এটি observable arrays বা plain arrays এর উপর ভিত্তি করে আইটেমগুলি প্রদর্শন করতে সহায়তা করে।

Example: Using `foreach` Binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS foreach Binding</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>List of Users:</h2>
    <ul data-bind="foreach: users">
        <li>
            <span data-bind="text: name"></span>
        </li>
    </ul>

    <script>
        function AppViewModel() {
            this.users = ko.observableArray([
                { name: "John" },
                { name: "Jane" },
                { name: "Tom" }
            ]);
        }

        // Activating KnockoutJS bindings
        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

Explanation:

data-bind="foreach: users": এটি users অ্যারের সকল উপাদান রেন্ডার করে।
<li> এলিমেন্টের মধ্যে data-bind="text: name": প্রতিটি user অবজেক্টের name প্রপার্টি প্রদর্শন করবে।

এখানে, যখন users অ্যারে পরিবর্তিত হবে, UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

2. `if` Binding

if binding এর মাধ্যমে আপনি কন্ডিশনাল লজিক রেন্ডার করতে পারেন। এটি নির্দিষ্ট শর্ত অনুযায়ী HTML উপাদানগুলি প্রদর্শন বা গোপন করতে ব্যবহৃত হয়।

Example: Using `if` Binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS if Binding</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>User Status</h2>
    <div data-bind="if: isUserLoggedIn">
        <p>Welcome back, user!</p>
    </div>
    <div data-bind="ifnot: isUserLoggedIn">
        <p>Please log in to continue.</p>
    </div>

    <button data-bind="click: toggleLoginStatus">Toggle Login Status</button>

    <script>
        function AppViewModel() {
            this.isUserLoggedIn = ko.observable(false); // Initial login status
            
            // Function to toggle login status
            this.toggleLoginStatus = () => {
                this.isUserLoggedIn(!this.isUserLoggedIn()); // Toggle the login status
            };
        }

        // Activating KnockoutJS bindings
        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

Explanation:

data-bind="if: isUserLoggedIn": যদি isUserLoggedIn true হয়, তাহলে Welcome back বার্তা প্রদর্শিত হবে।
data-bind="ifnot: isUserLoggedIn": যদি isUserLoggedIn false হয়, তাহলে Please log in বার্তা প্রদর্শিত হবে।

এখানে toggleLoginStatus ফাংশন ক্লিক করলে ইউজারের লগইন স্ট্যাটাস পরিবর্তিত হবে এবং কন্ডিশনাল বার্তাটি আপডেট হবে।

3. `with` Binding

with binding ব্যবহার করে আপনি একটি নির্দিষ্ট অবজেক্টের প্রপার্টি থেকে ডেটা মডেল তৈরি করতে পারেন এবং সেই ডেটা থেকে ইউজার ইন্টারফেস রেন্ডার করতে পারেন। এটি একটি নির্দিষ্ট অবজেক্টের কনটেক্সটে কাজ করে।

Example: Using `with` Binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS with Binding</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>User Profile</h2>

    <div data-bind="with: user">
        <p>Name: <span data-bind="text: name"></span></p>
        <p>Email: <span data-bind="text: email"></span></p>
    </div>

    <script>
        function AppViewModel() {
            this.user = ko.observable({
                name: "John Doe",
                email: "john@example.com"
            });
        }

        // Activating KnockoutJS bindings
        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

Explanation:

data-bind="with: user": এখানে user অবজেক্টের সমস্ত প্রপার্টি with binding এর মাধ্যমে ব্যবহার করা হচ্ছে।
text: name এবং text: email: user অবজেক্টের name এবং email প্রপার্টি প্রদর্শন করা হচ্ছে।

এখানে, user অবজেক্টের মান পরিবর্তিত হলে UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

4. `template` Binding

template binding তে, আপনি বিশেষভাবে টেমপ্লেট রেন্ডার করতে পারেন যা বিশেষ একটি কন্টেক্সটে এবং শর্তে প্রদর্শিত হবে।

Example: Using `template` Binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Template Binding</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>Template Binding Example</h2>

    <div data-bind="template: { name: 'userTemplate', data: user }"></div>

    <script type="text/html" id="userTemplate">
        <p>Name: <span data-bind="text: name"></span></p>
        <p>Email: <span data-bind="text: email"></span></p>
    </script>

    <script>
        function AppViewModel() {
            this.user = {
                name: "Alice",
                email: "alice@example.com"
            };
        }

        // Activating KnockoutJS bindings
        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

Explanation:

template binding: template binding ব্যবহার করা হয়েছে userTemplate নামে একটি টেমপ্লেট রেন্ডার করার জন্য।
data-bind="text: name" এবং data-bind="text: email" এর মাধ্যমে name এবং email টেমপ্লেটের অংশ হিসেবে প্রদর্শিত হচ্ছে।

এখানে, template binding টেমপ্লেটকে ইউজারের ডেটা অনুযায়ী রেন্ডার করতে সাহায্য করে।

KnockoutJS এর template binding আপনাকে MVVM (Model-View-ViewModel) প্যাটার্নে কার্যকরী ডাইনামিক UI তৈরির জন্য সহায়তা করে। আপনি foreach, if, with, এবং template বাইনডিং এর মাধ্যমে HTML উপাদানগুলোকে ডেটার উপর ভিত্তি করে শর্তানুযায়ী রেন্ডার করতে পারেন। এটি আপনার কোডকে আরও পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য করে তোলে এবং UI ও ডেটার মধ্যে স্বয়ংক্রিয় সিঙ্ক্রোনাইজেশন নিশ্চিত করে।

Content added By

Najjar Hossain Raju

KnockoutJS এর মাধ্যমে Templates তৈরি করা

268

KnockoutJS এর মাধ্যমে templates তৈরি করা খুবই শক্তিশালী এবং নমনীয় উপায়, যার মাধ্যমে আপনি dynamic UI তৈরি করতে পারেন। Templates আপনাকে ডেটা-বাইন্ডিংয়ের মাধ্যমে UI উপাদানগুলোকে ডাইনামিকভাবে পরিবর্তন করতে এবং পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করতে সহায়তা করে।

KnockoutJS তে templates মূলত HTML টেমপ্লেট হিসেবে ব্যবহৃত হয়, যা foreach বা if বাইন্ডিংয়ের সাথে মিলে UI কনটেন্ট ডাইনামিকভাবে তৈরি ও আপডেট করে। এতে করে আপনি আপনার অ্যাপ্লিকেশনটির UI উন্নত এবং দক্ষভাবে কাস্টমাইজ করতে পারেন।

এখানে KnockoutJS এর মাধ্যমে Templates তৈরি করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হবে।

1. KnockoutJS Templates তৈরি করা:

KnockoutJS তে template তৈরি করা খুব সহজ। সাধারণত, HTML টেমপ্লেট তৈরি করতে <script> ট্যাগ ব্যবহার করা হয় এবং এতে type="text/html" সেট করা হয়। তারপর এই টেমপ্লেটগুলিকে data-bind="template" বাইন্ডিংয়ের মাধ্যমে ব্যবহার করা হয়।

টেমপ্লেট উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Templates</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>

    <!-- Define a template -->
    <script type="text/html" id="item-template">
        <div>
            <h3 data-bind="text: name"></h3>
            <p data-bind="text: description"></p>
        </div>
    </script>

    <div>
        <h2>Items List</h2>
        <div data-bind="foreach: items">
            <div data-bind="template: { name: 'item-template', data: $data }"></div>
        </div>
    </div>

    <script>
        // ViewModel
        function AppViewModel() {
            this.items = ko.observableArray([
                { name: "Item 1", description: "This is the first item" },
                { name: "Item 2", description: "This is the second item" },
                { name: "Item 3", description: "This is the third item" }
            ]);
        }

        // Apply Knockout bindings
        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

ব্যাখ্যা:

Template Definition:
- প্রথমে <script type="text/html" id="item-template"> ট্যাগের মাধ্যমে একটি টেমপ্লেট ডিফাইন করা হয়েছে। এখানে name এবং description নামক প্রপার্টি থেকে ডেটা ব্যাকবোন হিসেবে UI তৈরি করা হচ্ছে।
foreach Binding:
- data-bind="foreach: items" বাইন্ডিং ব্যবহার করে items অ্যারে থেকে প্রতিটি আইটেমের জন্য টেমপ্লেট রেন্ডার করা হচ্ছে।
- এখানে, $data ব্যাবহার করে আপনি প্রতিটি আইটেমের ডেটা item-template টেমপ্লেটে পাঠাচ্ছেন।
Template Usage:
- data-bind="template: { name: 'item-template', data: $data }": এখানে টেমপ্লেটের নাম item-template হিসেবে সেট করা হয়েছে, এবং data: $data এর মাধ্যমে আইটেমের ডেটা টেমপ্লেটে পাস করা হয়েছে।

2. Conditionals with Templates (Conditionally Rendering Templates):

KnockoutJS তে আপনি টেমপ্লেটগুলিকে if বা ifnot বাইন্ডিং ব্যবহার করে শর্তসাপেক্ষভাবে রেন্ডার করতে পারেন। অর্থাৎ, আপনি চাইলে নির্দিষ্ট শর্তে টেমপ্লেট দেখাতে বা লুকাতে পারবেন।

if Binding উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Conditional Templates</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>

    <!-- Define a template -->
    <script type="text/html" id="user-template">
        <div>
            <h3 data-bind="text: name"></h3>
            <p data-bind="text: email"></p>
        </div>
    </script>

    <div>
        <h2>User Information</h2>
        <div data-bind="if: user">
            <div data-bind="template: { name: 'user-template', data: user }"></div>
        </div>
        <div data-bind="ifnot: user">
            <p>No user data available.</p>
        </div>
    </div>

    <script>
        // ViewModel
        function AppViewModel() {
            this.user = ko.observable({
                name: "John Doe",
                email: "john.doe@example.com"
            });
        }

        // Apply Knockout bindings
        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

ব্যাখ্যা:

if and ifnot Bindings:
- if বাইন্ডিং দিয়ে user অবজার্ভেবল থাকা অবস্থায় টেমপ্লেট রেন্ডার করা হচ্ছে।
- ifnot বাইন্ডিং দিয়ে আপনি যখন user অবজার্ভেবল null বা undefined হবে, তখন একটি টেক্সট প্রদর্শিত হবে, যেমন "No user data available."

3. Nested Templates (Nested Template Usage):

আপনি টেমপ্লেটের মধ্যে আরও টেমপ্লেট অন্তর্ভুক্ত করে nested templates তৈরি করতে পারেন। এটি আরও জটিল ইউআই তৈরিতে সহায়তা করে এবং কোড পুনঃব্যবহারযোগ্য করে তোলে।

Nested Template উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Nested Templates</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>

    <!-- Define Main Template -->
    <script type="text/html" id="main-template">
        <div>
            <h2 data-bind="text: title"></h2>
            <div data-bind="foreach: items">
                <div data-bind="template: { name: 'nested-template', data: $data }"></div>
            </div>
        </div>
    </script>

    <!-- Define Nested Template -->
    <script type="text/html" id="nested-template">
        <div>
            <p data-bind="text: name"></p>
            <p data-bind="text: description"></p>
        </div>
    </script>

    <div>
        <div data-bind="template: { name: 'main-template', data: mainData }"></div>
    </div>

    <script>
        // ViewModel
        function AppViewModel() {
            this.mainData = {
                title: "Main Title",
                items: [
                    { name: "Item 1", description: "Description of Item 1" },
                    { name: "Item 2", description: "Description of Item 2" }
                ]
            };
        }

        // Apply Knockout bindings
        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

ব্যাখ্যা:

Main Template:
- main-template নামক টেমপ্লেটটি title এবং items এর উপর কাজ করে। এই টেমপ্লেটের মধ্যে অন্য একটি টেমপ্লেট (nested-template) রেন্ডার করা হচ্ছে।
Nested Template:
- nested-template একটি ছোট টেমপ্লেট যা items এর ডেটা প্রদর্শন করছে।

KnockoutJS এর মাধ্যমে templates ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনটি আরও ডায়নামিক, পুনঃব্যবহারযোগ্য এবং মডুলার করতে পারেন। Templates এর মাধ্যমে আপনি একটি ডেটার উপর ভিত্তি করে ভিউ তৈরি করতে পারবেন এবং শর্তসাপেক্ষে বা foreach দিয়ে ডেটা লিস্ট রেন্ডার করতে পারবেন। Nested Templates এবং Conditional Templates ব্যবহার করে আপনি আরও জটিল এবং মডুলার UI তৈরি করতে পারবেন।

এই সুবিধাগুলি KnockoutJS কে একটি শক্তিশালী লাইব্রেরি হিসেবে উপস্থাপন করে, যা ওয়েব ডেভেলপমেন্টে খুবই উপকারী।

Content added By

Najjar Hossain Raju

Template Binding ব্যবহার করে ডায়নামিক কন্টেন্ট প্রদর্শন

206

KnockoutJS হল একটি JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে এবং ডেটা-বাইন্ডিং এবং ডিপেনডেন্সি ট্র্যাকিং এর মাধ্যমে ডাইনামিক কন্টেন্ট ব্যবস্থাপনা সহজ করে। Template Binding হল KnockoutJS এর একটি শক্তিশালী বৈশিষ্ট্য, যা আপনাকে ডাইনামিক কন্টেন্ট প্রদর্শন করতে সাহায্য করে, যেমন একাধিক আইটেমের লিস্ট তৈরি করা এবং সেই তালিকার প্রতিটি আইটেমের জন্য কাস্টম টেমপ্লেট রেন্ডার করা।

Template Binding মূলত foreach এর মতো ডাইনামিকভাবে HTML টেমপ্লেট রেন্ডার করতে ব্যবহৃত হয়, যেখানে ডেটা পরিবর্তিত হলে UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

এই গাইডে KnockoutJS Template Binding ব্যবহার করে ডাইনামিক কন্টেন্ট প্রদর্শন করা হবে।

1. KnockoutJS তে Template Binding এর ধারণা:

Template Binding ব্যবহারের মাধ্যমে আপনি KnockoutJS এ একটি কাস্টম টেমপ্লেট ডিফাইন করতে পারেন এবং ডেটা পরিবর্তিত হলে সেই টেমপ্লেটটি ডাইনামিকভাবে রেন্ডার হবে। এটি <script> ট্যাগ ব্যবহার করে HTML টেমপ্লেট তৈরি করতে সহায়তা করে এবং আপনি সেই টেমপ্লেটটি ডাইনামিক ডেটার সাথে বাইন্ড করে প্রদর্শন করতে পারেন।

Template Binding এর সোজা উদাহরণ:

ধরা যাক, আপনি একটি fruits array ডাইনামিকভাবে প্রদর্শন করতে চান।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Template Binding Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>Fruits List</h2>
    <!-- Template Binding Example -->
    <ul data-bind="foreach: fruits">
        <li>
            <span data-bind="text: name"></span> 
            <button data-bind="click: $parent.removeFruit">Remove</button>
        </li>
    </ul>

    <button data-bind="click: addFruit">Add Fruit</button>

    <!-- Template for each fruit -->
    <script type="text/html" id="fruitTemplate">
        <div>
            <span data-bind="text: name"></span>
            <button data-bind="click: $parent.removeFruit">Remove</button>
        </div>
    </script>

    <script>
        // ViewModel
        function AppViewModel() {
            var self = this;
            self.fruits = ko.observableArray([
                { name: "Apple" },
                { name: "Banana" },
                { name: "Orange" }
            ]);

            // Add a new fruit
            self.addFruit = function () {
                self.fruits.push({ name: "Grapes" });
            };

            // Remove a fruit
            self.removeFruit = function (fruit) {
                self.fruits.remove(fruit);
            };
        }

        // Apply Knockout bindings
        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

2. Code Breakdown:

foreach Binding:
- data-bind="foreach: fruits": এটি fruits array এর প্রতিটি আইটেমের জন্য একটি <li> রেন্ডার করবে।
- প্রতিটি fruit অবজেক্টের জন্য, <span> তে name প্রপার্টি বাইন্ড করা হয়েছে।
- প্রতিটি আইটেমের পাশে একটি Remove বাটন রয়েছে, যা ক্লিক করার পর ঐ আইটেমটিকে array থেকে মুছে ফেলবে।
Template Binding:
- <script type="text/html" id="fruitTemplate">: এখানে একটি custom HTML টেমপ্লেট তৈরি করা হয়েছে। Template binding এর মাধ্যমে এই টেমপ্লেটটি ডাইনামিকভাবে রেন্ডার করা হবে।
- <ul data-bind="foreach: fruits">: এখানে fruits array এর আইটেমগুলো টেমপ্লেটটি ব্যবহার করে দেখানো হবে।
Add and Remove Methods:
- addFruit মেথডে নতুন ফ্রুট অ্যাড করা হচ্ছে।
- removeFruit মেথডে ঐ ফ্রুটটি অ্যারের মধ্যে থেকে মুছে ফেলা হচ্ছে।

3. Template Binding এর সুবিধা:

Dynamic Content Rendering: ডাইনামিক কন্টেন্ট যেমন লিস্ট বা ডেটাবেসের ডেটা টেমপ্লেটের মাধ্যমে সহজে প্রদর্শন করা যায়।
Maintainability: একই টেমপ্লেট বারবার ব্যবহার করা সম্ভব, ফলে কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ সহজ হয়।
Separation of Concerns: View এবং Data (ViewModel) এর মধ্যে পার্থক্য বজায় রেখে UI এবং লজিক পৃথক করা সম্ভব।

4. আরও Complex Example with Template Binding:

ধরা যাক, আপনি একটি product list তৈরি করতে চান, যেখানে প্রতিটি প্রোডাক্টের নাম, মূল্য, এবং একটি remove বাটন থাকবে।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Template Binding Complex Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>Product List</h2>
    <ul data-bind="foreach: products">
        <li>
            <span data-bind="text: name"></span> - 
            <span data-bind="text: price"></span>
            <button data-bind="click: $parent.removeProduct">Remove</button>
        </li>
    </ul>

    <script type="text/html" id="productTemplate">
        <div>
            <span data-bind="text: name"></span> - 
            <span data-bind="text: price"></span>
            <button data-bind="click: $parent.removeProduct">Remove</button>
        </div>
    </script>

    <script>
        function AppViewModel() {
            var self = this;
            self.products = ko.observableArray([
                { name: "Laptop", price: "$1000" },
                { name: "Smartphone", price: "$600" },
                { name: "Tablet", price: "$400" }
            ]);

            self.removeProduct = function (product) {
                self.products.remove(product);
            };
        }

        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>

Code Breakdown:

foreach Binding:
- <ul data-bind="foreach: products">: এখানে products array এর প্রতিটি প্রোডাক্টের জন্য একটি আইটেম রেন্ডার করা হচ্ছে।
- প্রতিটি প্রোডাক্টের জন্য name এবং price বাইন্ড করা হচ্ছে।
Template Binding:
- <script type="text/html" id="productTemplate">: এখানে আমরা একটি productTemplate টেমপ্লেট ডিফাইন করেছি। এই টেমপ্লেটটি foreach এর মাধ্যমে ডাইনামিকভাবে ব্যবহার করা হবে।
Remove Button:
- removeProduct মেথডের মাধ্যমে আমরা একটি প্রোডাক্ট মুছে ফেলছি।

KnockoutJS এর Template Binding হল একটি শক্তিশালী ফিচার যা ডাইনামিক কন্টেন্ট এবং লিস্ট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। foreach এবং template বাইনডিংয়ের মাধ্যমে আপনি সহজেই ডেটা রেন্ডার করতে পারেন এবং যখন ডেটা পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়। এটি অ্যাপ্লিকেশনটির রক্ষণাবেক্ষণ এবং কোডের পুনঃব্যবহারযোগ্যতা সহজ করে।

Content added By

Najjar Hossain Raju

Templates এর মধ্যে Iteration এবং Conditionals

293

KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে এবং ডেটা-বাইন্ডিং সিস্টেমের মাধ্যমে ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করে। KnockoutJS তে Template Binding ব্যবহার করে আপনি dynamic content এবং conditional rendering সহ iteration (looping) পরিচালনা করতে পারেন।

এই গাইডে আমরা KnockoutJS Templates এর মধ্যে Iteration এবং Conditionals ব্যবহারের বিস্তারিত আলোচনা করব।

1. KnockoutJS Template Binding:

Template Binding হল KnockoutJS এর একটি শক্তিশালী বৈশিষ্ট্য, যা HTML টেমপ্লেটের মাধ্যমে ডাইনামিক কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি observable arrays এর মাধ্যমে বিভিন্ন আইটেম লুপ করতে এবং conditionals এর মাধ্যমে নির্দিষ্ট কন্টেন্ট প্রদর্শন করতে পারেন।

Template Binding উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Template Binding</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>KnockoutJS Template Binding Example</h2>

    <div data-bind="template: {name: 'fruitTemplate', foreach: fruits}"></div>

    <script type="text/html" id="fruitTemplate">
        <div>
            <p data-bind="text: $data"></p>
        </div>
    </script>

    <script>
        function AppViewModel() {
            this.fruits = ko.observableArray(["Apple", "Banana", "Orange", "Grapes"]);  // Observable array for fruits
        }

        ko.applyBindings(new AppViewModel());  // Apply bindings
    </script>

</body>
</html>

এখানে:

Template Binding ব্যবহার করে fruitTemplate টেমপ্লেটের মাধ্যমে fruits observable array এর সমস্ত আইটেম রেন্ডার করা হয়েছে।
foreach ব্যান্ডিংটি fruits array এর প্রতিটি আইটেমের জন্য টেমপ্লেট লুপ করবে এবং তা প্রদর্শন করবে।

2. Iteration (Looping) with Template Binding:

KnockoutJS তে iteration বা looping করার জন্য foreach binding ব্যবহার করা হয়। এটি array বা collection এর প্রতিটি আইটেমের উপর কাজ করে এবং নির্দিষ্ট HTML টেমপ্লেটকে প্রতিটি আইটেমের জন্য রেন্ডার করে।

Iteration (Looping) উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Iteration Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>KnockoutJS Iteration Example</h2>

    <ul data-bind="foreach: fruits">
        <li data-bind="text: $data"></li>
    </ul>

    <script>
        function AppViewModel() {
            this.fruits = ko.observableArray(["Apple", "Banana", "Orange", "Grapes"]);  // Observable array for fruits
        }

        ko.applyBindings(new AppViewModel());  // Apply bindings
    </script>

</body>
</html>

এখানে:

foreach binding এর মাধ্যমে KnockoutJS fruits observable array এর প্রতিটি আইটেম লুপ করে একটি <li> ট্যাগের মধ্যে প্রদর্শন করবে।
$data ব্যবহার করে প্রত্যেক আইটেমকে টেমপ্লেটে প্রদর্শন করা হয়েছে।

Using Indexed Iteration (With Index):

<ul data-bind="foreach: {data: fruits, as: 'fruit', index: 'fruitIndex'}">
    <li data-bind="text: fruit + ' is at index ' + fruitIndex"></li>
</ul>

এখানে:

index ব্যবহার করে প্রতিটি আইটেমের ইনডেক্স পাওয়া যাচ্ছে, যা fruitIndex দ্বারা অ্যাক্সেস করা হচ্ছে।

3. Conditionals in KnockoutJS with Template Binding:

KnockoutJS তে conditionals বা শর্তসাপেক্ষ ভিত্তিতে ডেটা প্রদর্শন করতে if এবং ifnot bindings ব্যবহার করা হয়। এটি ব্যবহার করে আপনি নির্দিষ্ট শর্তে UI রেন্ডার করতে পারেন।

Conditionals উদাহরণ (if and ifnot):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Conditionals Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <h2>KnockoutJS Conditionals Example</h2>

    <div data-bind="if: isVisible">
        <p>This content is visible because isVisible is true!</p>
    </div>

    <button data-bind="click: toggleVisibility">Toggle Visibility</button>

    <script>
        function AppViewModel() {
            this.isVisible = ko.observable(true);  // Observable for visibility

            // Method to toggle visibility
            this.toggleVisibility = () => {
                this.isVisible(!this.isVisible());  // Toggle between true and false
            };
        }

        ko.applyBindings(new AppViewModel());  // Apply bindings
    </script>

</body>
</html>

এখানে:

if binding ব্যবহার করা হয়েছে, যার মাধ্যমে isVisible observable এর মান যদি true হয়, তবে <div> এলিমেন্ট রেন্ডার হবে।
toggleVisibility মেথডে ক্লিক করলে isVisible এর মান পরিবর্তিত হবে এবং UI আপডেট হবে।

Conditionals with `ifnot`:

<div data-bind="ifnot: isVisible">
    <p>This content is visible because isVisible is false!</p>
</div>

এখানে:

ifnot ব্যবহার করা হয়েছে, যা isVisible যদি false হয়, তখন HTML এলিমেন্টটি রেন্ডার করবে।

4. Combining Iteration and Conditionals:

KnockoutJS তে foreach এবং if / ifnot binding একসাথে ব্যবহার করে আপনি ডেটার উপর ভিত্তি করে শর্তসাপেক্ষ তালিকা প্রদর্শন করতে পারেন।

Combining Iteration and Conditionals উদাহরণ:

<ul data-bind="foreach: fruits">
    <li data-bind="text: $data, visible: $data !== 'Banana'"></li>
</ul>

এখানে:

foreach binding এর মাধ্যমে সব ফলের নাম প্রদর্শন করা হচ্ছে এবং visible binding ব্যবহার করে Banana ফলটি না দেখানোর শর্ত দেওয়া হয়েছে।

KnockoutJS তে Templates এর মাধ্যমে Iteration এবং Conditionals ব্যবহার করে আপনি সহজেই ডাইনামিক এবং ইন্টারঅ্যাকটিভ কন্টেন্ট তৈরি করতে পারেন।

foreach দিয়ে আপনি অ্যারে বা লিস্ট এর আইটেম লুপ করতে পারেন।
if এবং ifnot দিয়ে আপনি শর্তসাপেক্ষে UI উপাদান রেন্ডার করতে পারেন।
KnockoutJS Templates ব্যবহার করে ডেটা-বাইন্ডিং এর মাধ্যমে ডাইনামিক UI তৈরি করা সহজ হয় এবং আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করে তোলে।

Content added By

Najjar Hossain Raju

External Templates এবং KnockoutJS Components

288

KnockoutJS তে External Templates এবং KnockoutJS Components এর মাধ্যমে আপনি আরও উন্নত এবং মডুলার ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন। এই টুলস দুটি আপনাকে কাস্টমাইজড, পুনঃব্যবহারযোগ্য এবং ডাইনামিক UI তৈরি করতে সহায়তা করে।

এখানে External Templates এবং KnockoutJS Components এর ব্যবহার এবং তাদের সুবিধা সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

1. External Templates in KnockoutJS

External templates হল সেই HTML টেমপ্লেট ফাইলগুলো যা KnockoutJS-এ data-binding প্রয়োগ করতে ব্যবহার করা হয়। এটির মাধ্যমে আপনি HTML টেমপ্লেটগুলোকে একটি আলাদা ফাইলে সংরক্ষণ করতে পারেন, যা কোডের পুনঃব্যবহারযোগ্যতা বাড়ায় এবং আপনার HTML এবং JavaScript কোডকে আলাদা রাখতে সহায়তা করে।

External Template ব্যবহারের সুবিধা:

Separation of Concerns: HTML এবং JavaScript কোড আলাদা রাখা যায়, যার ফলে কোড পরিষ্কার এবং সংগঠিত হয়।
Reusability: একাধিক জায়গায় একই টেমপ্লেট ব্যবহার করা সম্ভব হয়।
Scalability: অ্যাপ্লিকেশন বড় হলে এটি আরও সহজে স্কেল করা যায়।

External Template এর উদাহরণ:

Step 1: External Template তৈরি করা

প্রথমে একটি আলাদা HTML ফাইলে টেমপ্লেট তৈরি করুন:

template.html:

<script type="text/html" id="my-template">
    <div>
        <h3 data-bind="text: title"></h3>
        <p data-bind="text: description"></p>
    </div>
</script>

এখানে:

id="my-template" হল টেমপ্লেটের পরিচয় যা KnockoutJS-এ বাইন্ডিং করতে ব্যবহার হবে।
data-bind="text: title" এবং data-bind="text: description" দিয়ে টেমপ্লেটের মধ্যে ডেটা বাইন্ডিং করা হয়েছে।

Step 2: KnockoutJS Script:

এখন JavaScript ব্যবহার করে টেমপ্লেটটি অ্যাপ্লিকেশনে বাইন্ড করা হবে:

app.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<script>
    function ViewModel() {
        this.title = ko.observable("External Template Example");
        this.description = ko.observable("This is an example of using external templates in KnockoutJS.");
    }

    ko.applyBindings(new ViewModel());
</script>

এখানে:

ViewModel এ title এবং description দুটি observable ডেটা তৈরি করা হয়েছে, যা টেমপ্লেটে বাইন্ড করা হবে।

Step 3: HTML Page with Template and Script

এখন মূল HTML পৃষ্ঠাতে টেমপ্লেট এবং স্ক্রিপ্টগুলো একত্রিত করুন:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS External Template Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <!-- Template Insertion -->
    <div data-bind="template: { name: 'my-template' }"></div>

    <!-- External Template -->
    <script type="text/html" id="my-template">
        <div>
            <h3 data-bind="text: title"></h3>
            <p data-bind="text: description"></p>
        </div>
    </script>

    <script>
        function ViewModel() {
            this.title = ko.observable("External Template Example");
            this.description = ko.observable("This is an example of using external templates in KnockoutJS.");
        }

        ko.applyBindings(new ViewModel());
    </script>

</body>
</html>

এখানে:

<div data-bind="template: { name: 'my-template' }"></div> দ্বারা আমরা my-template টেমপ্লেটটি HTML পেজে ইনসার্ট করেছি।
ko.applyBindings() ব্যবহার করে ViewModel এর ডেটা টেমপ্লেটের সাথে বাইন্ড করা হয়েছে।

2. KnockoutJS Components

KnockoutJS তে Components আপনাকে UI এর বিভিন্ন অংশকে পুনঃব্যবহারযোগ্য ব্লকে ভেঙে কাজ করার সুবিধা দেয়। Components এর মাধ্যমে আপনি আলাদা আলাদা UI অংশের জন্য তাদের নিজস্ব ViewModel এবং HTML template তৈরি করতে পারেন। এটি আপনার কোডকে আরও মডুলার এবং স্কেলযোগ্য করে তোলে।

Components এর সুবিধা:

Reusability: একবার তৈরি করা কম্পোনেন্ট বিভিন্ন জায়গায় ব্যবহার করা যায়।
Encapsulation: কম্পোনেন্ট এর মধ্যে থাকা কোড একে অপরের থেকে আলাদা থাকে, যা কোড ব্যবস্থাপনাকে সহজ করে।
Scalability: বড় অ্যাপ্লিকেশন তৈরি করতে সহায়ক।

Component তৈরি এবং ব্যবহার:

Step 1: Define a Component

KnockoutJS তে একটি component তৈরি করতে ko.components.register() ব্যবহার করা হয়। কম্পোনেন্টে ViewModel এবং HTML template থাকতে পারে।

Example Component:

ko.components.register('person-info', {
    viewModel: function(params) {
        this.firstName = ko.observable(params.firstName || "John");
        this.lastName = ko.observable(params.lastName || "Doe");
    },
    template: '<div><h3 data-bind="text: firstName"></h3><p data-bind="text: lastName"></p></div>'
});

এখানে:

viewModel: এখানে আপনি কম্পোনেন্টের জন্য ViewModel তৈরি করেন। এটি প্রপস হিসাবে ডেটা গ্রহণ করে এবং observable ডেটার মাধ্যমে UI আপডেট করে।
template: এটি কম্পোনেন্টের HTML টেমপ্লেট।

Step 2: Use the Component in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Components Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <!-- Use the Component -->
    <person-info params="firstName: 'Jane', lastName: 'Smith'"></person-info>

    <script>
        // Register Component
        ko.components.register('person-info', {
            viewModel: function(params) {
                this.firstName = ko.observable(params.firstName || "John");
                this.lastName = ko.observable(params.lastName || "Doe");
            },
            template: '<div><h3 data-bind="text: firstName"></h3><p data-bind="text: lastName"></p></div>'
        });

        // Apply Bindings
        ko.applyBindings();
    </script>

</body>
</html>

এখানে:

person-info কম্পোনেন্ট ব্যবহার করা হয়েছে এবং এতে params এর মাধ্যমে firstName এবং lastName প্যারামিটার পাঠানো হয়েছে।

Step 3: Component with Dynamic Data

আপনি ডাইনামিক ডেটা ব্যবহার করতে পারেন এবং এটি পরিবর্তন করে UI আপডেট করতে পারেন।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnockoutJS Dynamic Component Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>

    <div>
        <label for="firstName">First Name: </label>
        <input type="text" data-bind="value: firstName">
        <label for="lastName">Last Name: </label>
        <input type="text" data-bind="value: lastName">
    </div>

    <person-info params="firstName: firstName, lastName: lastName"></person-info>

    <script>
        ko.components.register('person-info', {
            viewModel: function(params) {
                this.firstName = params.firstName;
                this.lastName = params.lastName;
            },
            template: '<div><h3 data-bind="text: firstName"></h3><p data-bind="text: lastName"></p></div>'
        });

        function ViewModel() {
            this.firstName = ko.observable("Jane");
            this.lastName = ko.observable("Smith");
        }

        ko.applyBindings(new ViewModel());
    </script>

</body>
</html>

এখানে:

params হিসেবে observable ডেটা পাঠানো হচ্ছে, যাতে ইউজার ইনপুট পরিবর্তন করার সঙ্গে সঙ্গে কম্পোনেন্টও আপডেট হয়।

সারাংশ:

External Templates: KnockoutJS তে external templates ব্যবহার করে আপনি HTML টেমপ্লেট এবং JavaScript কোড আলাদা রাখতে পারেন, যা কোডের পুনঃব্যবহারযোগ্যতা এবং স্কেলেবিলিটি বাড়ায়।
KnockoutJS Components: KnockoutJS Components আপনাকে UI এর বিভিন্ন অংশ মডুলারভাবে তৈরি করার সুযোগ দেয়, যেখানে প্রতিটি কম্পোনেন্টের নিজস্ব ViewModel এবং template থাকে।
Component Advantages: Components ব্যবহারে কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায় এবং অ্যাপ্লিকেশন স্কেল করা সহজ হয়।

KnockoutJS-এ External Templates এবং Components ব্যবহারের মাধ্যমে আপনি আরও মডুলার, ডাইনামিক এবং রিয়েল-টাইম ইউজার ইন্টারফেস তৈরি করতে পারবেন।

Content added By

Najjar Hossain Raju

KnockoutJS এর পরিচিতি KnockoutJS সেটআপ এবং ইনস্টলেশন KnockoutJS এর বেসিক ধারণা KnockoutJS এর Data Binding KnockoutJS এর Observable Arrays

KnockoutJS এর Template Binding

KnockoutJS এর Template Binding:

Common Template Bindings in KnockoutJS:

1. foreach Binding

Example: Using foreach Binding

Explanation:

2. if Binding

Example: Using if Binding

Explanation:

3. with Binding

Example: Using with Binding

Explanation:

4. template Binding

Example: Using template Binding

Explanation:

KnockoutJS এর মাধ্যমে Templates তৈরি করা

1. KnockoutJS Templates তৈরি করা:

টেমপ্লেট উদাহরণ:

ব্যাখ্যা:

2. Conditionals with Templates (Conditionally Rendering Templates):

if Binding উদাহরণ:

ব্যাখ্যা:

3. Nested Templates (Nested Template Usage):

Nested Template উদাহরণ:

ব্যাখ্যা:

Template Binding ব্যবহার করে ডায়নামিক কন্টেন্ট প্রদর্শন

1. KnockoutJS তে Template Binding এর ধারণা:

Template Binding এর সোজা উদাহরণ:

2. Code Breakdown:

3. Template Binding এর সুবিধা:

4. আরও Complex Example with Template Binding:

Code Breakdown:

Templates এর মধ্যে Iteration এবং Conditionals

1. KnockoutJS Template Binding:

Template Binding উদাহরণ:

2. Iteration (Looping) with Template Binding:

Iteration (Looping) উদাহরণ:

Using Indexed Iteration (With Index):

3. Conditionals in KnockoutJS with Template Binding:

Conditionals উদাহরণ (if and ifnot):

Conditionals with ifnot:

4. Combining Iteration and Conditionals:

Combining Iteration and Conditionals উদাহরণ:

External Templates এবং KnockoutJS Components

1. External Templates in KnockoutJS

External Template ব্যবহারের সুবিধা:

External Template এর উদাহরণ:

2. KnockoutJS Components

Components এর সুবিধা:

Component তৈরি এবং ব্যবহার:

Step 3: Component with Dynamic Data

সারাংশ:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

1. `foreach` Binding

Example: Using `foreach` Binding

2. `if` Binding

Example: Using `if` Binding

3. `with` Binding

Example: Using `with` Binding

4. `template` Binding

Example: Using `template` Binding

Conditionals with `ifnot`: