KnockoutJS এর Form Bindings

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

331

KnockoutJS তে Form Bindings হল এমন একটি বৈশিষ্ট্য যা ইউজার ইনপুট ফিল্ডগুলোর সাথে observables এবং computed observables কে বাইন্ড করার সুবিধা দেয়। এর মাধ্যমে আপনি সহজেই ফর্মের ডেটা এবং ভিউ এর মধ্যে সিঙ্ক্রোনাইজেশন করতে পারেন এবং two-way data binding এর সুবিধা পেতে পারেন।

KnockoutJS তে ফর্মের জন্য বেশ কিছু বাইন্ডিং রয়েছে, যা text inputs, checkboxes, radio buttons, select dropdowns ইত্যাদির সাথে কাজ করে।

এখানে KnockoutJS এর Form Bindings ব্যবহার করার জন্য কিছু উদাহরণ দেওয়া হলো:

1. KnockoutJS Form Bindings

KnockoutJS তে ফর্মের বিভিন্ন ইনপুট উপাদানের জন্য সহজে বাইন্ডিং করা যায়। মূলত, value binding, checked binding, options binding ইত্যাদি ব্যবহার করে আপনি ফর্ম উপাদানগুলোকে observables এর সাথে যুক্ত করতে পারেন।

1.1. `value` Binding (Text Input)

value binding ব্যবহার করে আপনি text inputs এর সাথে observable এর মান বাইন্ড করতে পারেন। যখন ইনপুটে পরিবর্তন হয়, তখন তা স্বয়ংক্রিয়ভাবে observable এ আপডেট হয়, এবং vice versa।

Example:

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

    <!-- Input field bound to observable -->
    <input type="text" data-bind="value: name, valueUpdate: 'input'" />
    <p>Your Name: <span data-bind="text: name"></span></p>

    <script>
        // ViewModel
        function ViewModel() {
            this.name = ko.observable('John Doe');
        }

        // Apply bindings
        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

Explanation:

value binding: এখানে name নামক একটি observable তৈরি করা হয়েছে, এবং ইনপুট ফিল্ডের মান (value) এর সাথে এটি বাইন্ড করা হয়েছে।
valueUpdate: 'input': এটি ব্যবহারকারীর ইনপুট করার সাথে সাথে পরিবর্তন দেখাবে।

1.2. `checked` Binding (Checkbox)

checked binding ব্যবহার করে আপনি checkboxes এবং radio buttons এর সাথে observable এর মান বাইন্ড করতে পারেন। এটি ইউজারের সিলেকশনের ভিত্তিতে পরিবর্তিত হবে।

Example (Checkbox):

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

    <!-- Checkbox bound to observable -->
    <input type="checkbox" data-bind="checked: isChecked" />
    <p>Is the box checked? <span data-bind="text: isChecked"></span></p>

    <script>
        // ViewModel
        function ViewModel() {
            this.isChecked = ko.observable(false);
        }

        // Apply bindings
        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

Explanation:

checked binding: এটি observable এর মান (true/false) এর সাথে checkbox এর চেকড অবস্থান বাইন্ড করে।
যখন ব্যবহারকারী চেকবক্সে ক্লিক করে, তখন isChecked observable আপডেট হবে এবং UI তে চেকবক্সের স্টেট পরিবর্তিত হবে।

1.3. `options` Binding (Select Dropdown)

KnockoutJS তে select dropdowns এর জন্য options binding ব্যবহার করা হয়। এর মাধ্যমে আপনি ড্রপডাউন মেনুতে কোন মান থাকবে তা observable array থেকে পেতে পারেন।

Example (Select Dropdown):

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

    <!-- Select dropdown bound to observable -->
    <select data-bind="options: colors, value: selectedColor"></select>
    <p>Your selected color is: <span data-bind="text: selectedColor"></span></p>

    <script>
        // ViewModel
        function ViewModel() {
            this.colors = ko.observableArray(['Red', 'Green', 'Blue', 'Yellow']);
            this.selectedColor = ko.observable('Red');
        }

        // Apply bindings
        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

Explanation:

options binding: colors নামক একটি observable array এর মাধ্যমে ড্রপডাউনে বিভিন্ন রং প্রদর্শিত হচ্ছে।
value binding: ড্রপডাউন থেকে নির্বাচিত মান selectedColor observable এর সাথে বাইন্ড করা হয়েছে।

1.4. `submit` Binding (Form Submission)

KnockoutJS তে আপনি ফর্মের submit ইভেন্টও বাইন্ড করতে পারেন। এটি ব্যবহৃত হয় যখন আপনি ফর্মের ডেটা সাবমিট করতে চান।

Example (Submit Form):

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

    <form data-bind="submit: submitForm">
        <input type="text" data-bind="value: name" placeholder="Enter your name" />
        <button type="submit">Submit</button>
    </form>

    <p>You submitted: <span data-bind="text: name"></span></p>

    <script>
        function ViewModel() {
            this.name = ko.observable('');
            this.submitForm = () => {
                alert('Form Submitted! Name: ' + this.name());
            };
        }

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

Explanation:

submit binding: submitForm ফাংশনটি ফর্ম সাবমিট করার সময় কল হবে।
value binding: ইনপুট ফিল্ডের মান observable name এর সাথে বাইন্ড করা হয়েছে।

1.5. `enable` Binding (Enable/Disable Input Fields)

KnockoutJS তে আপনি ইনপুট ফিল্ডগুলোর enable অথবা disable স্টেট নিয়ন্ত্রণ করতে পারেন।

Example (Enable/Disable):

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

    <input type="text" data-bind="value: name, enable: isEnabled" placeholder="Enter your name" />
    <button data-bind="click: toggleEnabled">Toggle Enable</button>

    <p>Your name is: <span data-bind="text: name"></span></p>

    <script>
        function ViewModel() {
            this.name = ko.observable('');
            this.isEnabled = ko.observable(true);  // Start with the input enabled

            this.toggleEnabled = () => {
                this.isEnabled(!this.isEnabled());  // Toggle the enable/disable state
            };
        }

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

Explanation:

enable binding: ইনপুট ফিল্ডটির সক্রিয় বা নিষ্ক্রিয় স্টেট isEnabled observable দ্বারা নিয়ন্ত্রিত হচ্ছে।
click binding: toggleEnabled ফাংশনটি বাটনে ক্লিক করার মাধ্যমে isEnabled এর মান পরিবর্তন করবে, ফলে ইনপুট ফিল্ডটি সক্রিয় বা নিষ্ক্রিয় হবে।

KnockoutJS তে Form Bindings ব্যবহারের মাধ্যমে আপনি খুব সহজে observable বা computed observable এর মান ফর্ম ইনপুট ফিল্ডগুলির সাথে বাইন্ড করতে পারেন। এর মাধ্যমে আপনি two-way data binding এর সুবিধা পাবেন, যেখানে UI এবং ডেটা মডেল একে অপরের সাথে সিঙ্ক্রোনাইজড থাকে। value, checked, submit, enable, options ইত্যাদি বাইন্ডিংগুলো KnockoutJS তে ফর্মের ডায়নামিক কার্যকারিতা সহজ করে তোলে এবং রিয়েল-টাইম ইউজার ইন্টারঅ্যাকশনের জন্য উপযুক্ত।

Content added By

Najjar Hossain Raju

Form Input এর জন্য Data Binding

253

KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) আর্কিটেকচার অনুসরণ করে এবং data-binding এর মাধ্যমে ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করতে সহায়তা করে। Form Input এর জন্য Data Binding এর মাধ্যমে আপনি ব্যবহারকারীর ইনপুটের সাথে ডেটা সম্পর্কিত করতে পারেন এবং UI তে সেই ইনপুটের পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে আপডেট করতে পারেন।

এই গাইডে KnockoutJS তে form input এর জন্য data binding ব্যবহারের পদ্ধতি এবং উদাহরণ দেওয়া হবে।

1. KnockoutJS Data Binding Overview:

Data Binding হল এমন একটি প্রক্রিয়া, যেখানে ডেটা একটি নির্দিষ্ট UI উপাদান বা ভিউয়ের সাথে সম্পর্কিত হয়। KnockoutJS এ, আপনি data-bind এট্রিবিউট ব্যবহার করে এই সম্পর্কটি তৈরি করতে পারেন। Two-way data binding এর মাধ্যমে, ব্যবহারকারীর ইনপুট ফিল্ডের মান পরিবর্তিত হলে তা মডেলেও প্রতিফলিত হয় এবং মডেলের মান পরিবর্তিত হলে তা UI তেও আপডেট হয়।

2. Form Input এর জন্য Basic Data Binding:

KnockoutJS এ form input এর জন্য data binding খুব সহজ। এখানে আমরা input, textarea, এবং select ফিল্ডের সাথে two-way data binding ব্যবহার করব।

HTML Example:

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

    <h2>KnockoutJS Form Input Binding Example</h2>

    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" data-bind="value: name, valueUpdate: 'input'" />
        <p>Your name is: <span data-bind="text: name"></span></p>

        <br><br>

        <label for="age">Age:</label>
        <input type="number" id="age" data-bind="value: age, valueUpdate: 'input'" />
        <p>Your age is: <span data-bind="text: age"></span></p>

        <br><br>

        <label for="country">Country:</label>
        <select id="country" data-bind="value: selectedCountry">
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
            <option value="UK">UK</option>
        </select>
        <p>You have selected: <span data-bind="text: selectedCountry"></span></p>

        <br><br>

        <button type="button" data-bind="click: changeName">Change Name</button>
    </form>

    <script>
        // ViewModel
        function AppViewModel() {
            this.name = ko.observable("John Doe");    // Observable for 'name'
            this.age = ko.observable(30);             // Observable for 'age'
            this.selectedCountry = ko.observable("USA"); // Observable for 'selectedCountry'

            // Method to change the name
            this.changeName = function() {
                this.name("Jane Doe");
            };
        }

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

</body>
</html>

3. ব্যাখ্যা:

data-bind="value: name, valueUpdate: 'input'":
- এখানে data-bind ব্যবহার করা হয়েছে value এবং valueUpdate এর সাথে। value দ্বারা observable name এর মান ইনপুট ফিল্ডে বাইন্ড করা হয়েছে। এর মানে হল, যখন আপনি ইনপুট ফিল্ডে কিছু লিখবেন, তখন তা স্বয়ংক্রিয়ভাবে name observable এর সাথে আপডেট হবে।
- valueUpdate: 'input' দ্বারা এটি ইনপুট ফিল্ডে input ইভেন্টের মাধ্যমে আপডেট হবে, অর্থাৎ ইনপুট দেওয়ার সাথে সাথে name এর মান আপডেট হবে।
<span data-bind="text: name"></span>:
- name observable এর মান এখানে text এর মাধ্যমে প্রদর্শিত হচ্ছে। এর মানে হল যে, name এর মান পরিবর্তিত হলে এটি UI তে স্বয়ংক্রিয়ভাবে রিফ্লেক্ট হবে।
<select data-bind="value: selectedCountry">:
- value বাইন্ডিং ব্যবহার করে একটি select ফিল্ডে selectedCountry observable এর মান বাইন্ড করা হয়েছে। আপনি যখন কোন অপশন সিলেক্ট করবেন, তখন তা স্বয়ংক্রিয়ভাবে selectedCountry observable এর মধ্যে সেভ হবে।
- <option value="USA">USA</option>: এখানে value বাইন্ডিং ব্যবহার করা হয়েছে, যা নির্দিষ্ট মান (যেমন, "USA") নির্বাচিত হলে observable আপডেট হবে।
<button data-bind="click: changeName">:
- click বাইন্ডিং ব্যবহার করে একটি বাটনে ক্লিক করার মাধ্যমে changeName ফাংশন কল করা হচ্ছে। এই ফাংশনটি name observable এর মান পরিবর্তন করবে।

4. Form Input এর জন্য KnockoutJS এর অন্যান্য Binding Techniques:

a. `checked` Binding:

Checkbox বা radio button এর মানকে একটি observable এর সাথে বাইন্ড করার জন্য checked বাইন্ডিং ব্যবহার করা হয়।

<label><input type="checkbox" data-bind="checked: isChecked"> I agree</label>
<p>Is checked: <span data-bind="text: isChecked"></span></p>

function AppViewModel() {
    this.isChecked = ko.observable(false);
}

এখানে, isChecked observable এর মান checkbox এর স্টেট পরিবর্তিত হলে আপডেট হবে।

b. `enable` and `disable` Binding:

enable এবং disable বাইন্ডিং দ্বারা আপনি HTML উপাদানগুলি সক্রিয় বা নিষ্ক্রিয় করতে পারেন।

<button data-bind="enable: isEnabled">Submit</button>

function AppViewModel() {
    this.isEnabled = ko.observable(true);  // Button will be enabled initially
}

এখানে isEnabled এর মান true থাকলে বাটন সক্রিয় থাকবে এবং false থাকলে বাটন নিষ্ক্রিয় হয়ে যাবে।

c. `visible` and `invisible` Binding:

KnockoutJS তে visible এবং invisible বাইন্ডিং ব্যবহার করে আপনি UI উপাদানগুলির দৃশ্যমানতা কন্ট্রোল করতে পারেন।

<p data-bind="visible: isVisible">This is visible when isVisible is true</p>

function AppViewModel() {
    this.isVisible = ko.observable(true);
}

এখানে isVisible observable এর মান true থাকলে প্যারাগ্রাফ দৃশ্যমান হবে, আর false থাকলে তা আড়াল হবে।

5. Advantages of Using KnockoutJS for Form Input Binding:

Two-Way Data Binding: KnockoutJS এর মাধ্যমে, ইনপুট ফিল্ডের মান এবং JavaScript মডেলের মধ্যে দুই-মুখী সম্পর্ক তৈরি করা যায়, যা UI এবং ডেটার মধ্যে সিঙ্ক্রোনাইজেশন নিশ্চিত করে।
Declarative Syntax: data-bind ব্যবহার করে কোডটি খুব পরিষ্কার এবং ডিক্লেয়ারেটিভ হয়, যা ডেভেলপারদের জন্য কোডিং সহজ করে তোলে।
Automatic UI Updates: যখন observables পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়, যা UI এবং ডেটার মধ্যে সম্পর্ক সহজ করে তোলে।
Extensibility: KnockoutJS সহজেই অন্যান্য লাইব্রেরি বা ফ্রেমওয়ার্কের সাথে ইন্টিগ্রেট করা যায় এবং এতে ব্যবহারকারীর প্রয়োজন অনুযায়ী কাস্টম বায়ন্ডিং তৈরি করা সম্ভব।

KnockoutJS তে form input এর জন্য data binding ব্যবহার করে আপনি সহজে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন। Two-way data binding এর মাধ্যমে ব্যবহারকারীর ইনপুট এবং UI এর মধ্যে সম্পর্ক স্থাপন করা যায়, যা অ্যাপ্লিকেশনকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে। KnockoutJS এর observables, computed observables, এবং data-bind সিস্টেমের মাধ্যমে আপনি সহজেই ডেটা এবং UI এর মধ্যে সিঙ্ক্রোনাইজেশন করতে পারেন।

Content added By

Najjar Hossain Raju

Checkbox এবং Radio Button Binding

301

KnockoutJS তে Checkbox এবং Radio Button এর সাথে data binding খুবই সহজ এবং কার্যকরী। KnockoutJS এর মাধ্যমে, আপনি two-way data binding ব্যবহার করে checkboxes এবং radio buttons এর মান সিঙ্ক্রোনাইজ করতে পারেন, এবং তা স্বয়ংক্রিয়ভাবে UI তে আপডেট হয় যখন মডেল ডেটা পরিবর্তিত হয়।

এখানে KnockoutJS এর মাধ্যমে checkbox এবং radio button binding করার পদ্ধতি আলোচনা করা হলো।

1. Checkbox Data Binding

Checkboxes সাধারণত true/false মান রিটার্ন করে এবং KnockoutJS এর মাধ্যমে observable ডেটার সাথে checkbox এর মানের সিঙ্ক্রোনাইজেশন করা হয়।

Checkbox with One-Way Binding:

এখানে একটি সিম্পল checkbox এর উদাহরণ দেওয়া হয়েছে যেখানে checkbox এর মান observable ডেটার সাথে সংযুক্ত করা হয়েছে।

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

    <h2>Is subscribed: <span data-bind="text: isSubscribed"></span></h2>

    <label for="subscribeCheckbox">Subscribe:</label>
    <input type="checkbox" id="subscribeCheckbox" data-bind="checked: isSubscribed">

    <script>
        function AppViewModel() {
            this.isSubscribed = ko.observable(false);  // Default value is false
        }

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

</body>
</html>

Explanation:

isSubscribed একটি observable যা checkbox এর মানের সাথে বাইন্ড করা হয়েছে। যখন checkbox টিক হবে, তখন isSubscribed এর মান true হবে, এবং যদি টিক না থাকে, তবে তার মান false হবে।
data-bind="checked: isSubscribed" দ্বারা checkbox এর মান এবং observable এর মান একে অপরের সাথে সিঙ্ক্রোনাইজ হয়।

Checkbox with Two-Way Binding:

KnockoutJS তে checkbox এর জন্য two-way data binding ব্যবহার করা যায়, অর্থাৎ যখন আপনি checkbox পরিবর্তন করবেন, তখন এটি ViewModel এর observable ডেটা আপডেট করবে এবং vice versa।

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

    <h2>Is subscribed: <span data-bind="text: isSubscribed"></span></h2>

    <label for="subscribeCheckbox">Subscribe:</label>
    <input type="checkbox" id="subscribeCheckbox" data-bind="checked: isSubscribed">

    <script>
        function AppViewModel() {
            this.isSubscribed = ko.observable(false);  // Default value is false
        }

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

</body>
</html>

এখানে, checked binding ব্যবহার করা হয়েছে যাতে checkbox এর মান এবং observable একে অপরের সাথে সিঙ্ক্রোনাইজ হয়।

2. Radio Button Data Binding

Radio Buttons সাধারণত একাধিক বিকল্পের মধ্যে একটি নির্বাচন করতে ব্যবহৃত হয়। KnockoutJS তে radio buttons এর সাথে two-way data binding ব্যবহার করে, আপনি ইউজারের নির্বাচিত মান সঠিকভাবে ViewModel এ সিঙ্ক্রোনাইজ করতে পারেন।

Radio Button Binding Example:

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

    <h2>Your selected option: <span data-bind="text: selectedOption"></span></h2>

    <label>
        <input type="radio" name="option" value="Option1" data-bind="checked: selectedOption"> Option 1
    </label>
    <label>
        <input type="radio" name="option" value="Option2" data-bind="checked: selectedOption"> Option 2
    </label>
    <label>
        <input type="radio" name="option" value="Option3" data-bind="checked: selectedOption"> Option 3
    </label>

    <script>
        function AppViewModel() {
            this.selectedOption = ko.observable("Option1"); // Default selected option
        }

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

</body>
</html>

Explanation:

এখানে, radio buttons এর জন্য data-bind="checked: selectedOption" ব্যবহার করা হয়েছে। এতে selectedOption observable ডেটার মান অনুযায়ী, ইউজারের নির্বাচিত radio button স্বয়ংক্রিয়ভাবে টিক হয়ে যাবে।
যখন ইউজার একটি radio button নির্বাচন করবেন, তখন selectedOption এর মান আপডেট হবে এবং UI তে তা প্রদর্শিত হবে।

Multiple Checkboxes Binding (Array Binding)

যদি আপনি একাধিক checkbox এর মান একটি অ্যারে বা তালিকা হিসেবে রাখতে চান, তবে KnockoutJS তে checkedValue এবং observableArray ব্যবহার করতে পারবেন।

Multiple Checkbox Binding Example:

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

    <h2>Selected options:</h2>
    <ul data-bind="foreach: selectedOptions">
        <li data-bind="text: $data"></li>
    </ul>

    <label>
        <input type="checkbox" data-bind="checked: selectedOptions, value: 'Option1'"> Option 1
    </label>
    <label>
        <input type="checkbox" data-bind="checked: selectedOptions, value: 'Option2'"> Option 2
    </label>
    <label>
        <input type="checkbox" data-bind="checked: selectedOptions, value: 'Option3'"> Option 3
    </label>

    <script>
        function AppViewModel() {
            this.selectedOptions = ko.observableArray();  // Array to hold selected options
        }

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

</body>
</html>

Explanation:

এখানে, একাধিক checkbox এর মান selectedOptions নামক একটি observableArray তে সিঙ্ক্রোনাইজ করা হচ্ছে।
যখন একটি checkbox চেক করা হবে, সেই মান observable array তে যোগ হবে, এবং যখন checkbox আনচেক করা হবে, সেই মান অ্যারের থেকে সরিয়ে দেওয়া হবে।
foreach binding ব্যবহার করে selectedOptions অ্যারের সব নির্বাচিত অপশনকে HTML লিস্টে প্রদর্শন করা হচ্ছে।

KnockoutJS তে checkboxes এবং radio buttons এর সাথে data binding সহজেই পরিচালনা করা যায়। Checkbox এবং radio button এর মাধ্যমে two-way data binding তৈরি করে আপনি UI এবং ডেটার মধ্যে স্বয়ংক্রিয় সিঙ্ক্রোনাইজেশন নিশ্চিত করতে পারেন, এবং observable ডেটার মান পরিবর্তন হলে তা UI তে অবিলম্বে আপডেট হয়। KnockoutJS এর এই ক্ষমতা অ্যাপ্লিকেশন ডেভেলপমেন্টে ইন্টারঅ্যাকটিভ এবং ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।

Content added By

Najjar Hossain Raju

Select Option Binding

238

KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা Model-View-ViewModel (MVVM) আর্কিটেকচার অনুসরণ করে এবং data binding এর মাধ্যমে UI এবং ডেটার মধ্যে স্বয়ংক্রিয়ভাবে যোগাযোগ প্রতিষ্ঠা করে। KnockoutJS তে Checkbox, Radio Button, এবং Select Option এর মত HTML ইন্টারঅ্যাকশন উপাদানগুলির সাথে সহজে two-way data binding বাস্তবায়ন করা যায়।

1. Checkbox Binding in KnockoutJS

Checkbox এর সাথে two-way data binding করতে KnockoutJS আপনাকে checked binding ব্যবহার করতে দেয়, যাতে আপনি checkbox এর নির্বাচিত (checked) বা অ-নির্বাচিত (unchecked) অবস্থার সাথে observable ডেটা সংযুক্ত করতে পারেন।

Example: Checkbox Binding

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

    <label>
        <input type="checkbox" data-bind="checked: isSubscribed" />
        Subscribe to newsletter
    </label>

    <p>Your subscription status: <span data-bind="text: isSubscribed() ? 'Subscribed' : 'Not Subscribed'"></span></p>

    <script>
        function AppViewModel() {
            this.isSubscribed = ko.observable(false); // Default value is false
        }

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

</body>
</html>

Explanation:

এখানে isSubscribed একটি observable ডেটা যা checkbox এর সাথে two-way binding এ যুক্ত।
যখন ইউজার চেকবক্সে টিক মারবে বা তুলে নেবে, তখন isSubscribed এর মান স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে এবং UI তে "Subscribed" বা "Not Subscribed" দেখাবে।

2. Radio Button Binding in KnockoutJS

Radio Buttons এর জন্যও two-way data binding করতে KnockoutJS আপনাকে checked binding ব্যবহার করতে দেয়, তবে এখানে আপনি একটি গ্রুপের মধ্যে একই ভ্যালু চয়ন করতে পারেন। একাধিক রেডিও বাটনের মধ্যে, আপনি কেবল একটি বাটন চয়ন করতে পারবেন, এবং এটি observable ডেটার সাথে সিঙ্ক্রোনাইজড থাকবে।

Example: Radio Button Binding

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

    <label>
        <input type="radio" name="gender" value="Male" data-bind="checked: gender" />
        Male
    </label>
    <label>
        <input type="radio" name="gender" value="Female" data-bind="checked: gender" />
        Female
    </label>

    <p>Your gender: <span data-bind="text: gender"></span></p>

    <script>
        function AppViewModel() {
            this.gender = ko.observable("Male"); // Default value is "Male"
        }

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

</body>
</html>

Explanation:

এখানে, gender একটি observable যা Radio Buttons এর সাথে two-way binding এ যুক্ত। যখন ইউজার একটি রেডিও বাটন নির্বাচন করবে, তখন gender এর মান আপডেট হবে এবং UI তে সেই মান প্রতিফলিত হবে।

3. Select Option Binding in KnockoutJS

Select Option এর জন্য KnockoutJS তে value binding ব্যবহার করা হয়। এটি one-way বা two-way data binding জন্য ব্যবহৃত হতে পারে, যেখানে আপনি একটি ড্রপডাউন লিস্টের সাথে observable ডেটাকে সংযুক্ত করবেন।

Example: Select Option Binding

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

    <label for="car">Choose a car:</label>
    <select id="car" data-bind="value: selectedCar, options: cars, optionsText: 'name', optionsValue: 'id'">
    </select>

    <p>Your selected car: <span data-bind="text: selectedCar"></span></p>

    <script>
        function AppViewModel() {
            this.cars = ko.observableArray([
                { id: 1, name: "Ford" },
                { id: 2, name: "Chevrolet" },
                { id: 3, name: "Toyota" }
            ]);
            this.selectedCar = ko.observable(); // No car selected initially
        }

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

</body>
</html>

Explanation:

options binding ব্যবহার করে, আপনি একটি array ডেটা (cars) ড্রপডাউন লিস্টে প্রদর্শন করতে পারেন।
optionsText এবং optionsValue প্রোপার্টি দিয়ে আপনি প্রতিটি অপশন উপাদানটির টেক্সট এবং ভ্যালু কাস্টমাইজ করতে পারেন।
selectedCar একটি observable ডেটা, যা ড্রপডাউন থেকে নির্বাচিত মান সংরক্ষণ করে। যখন ইউজার একটি অপশন নির্বাচন করবে, তখন selectedCar এর মান আপডেট হবে এবং UI তে এটি দেখাবে।

KnockoutJS তে Select Option এর অন্যান্য বৈশিষ্ট্য:

optionsCaption:
- আপনি একটি ডিফল্ট ক্যাপশন প্রদর্শন করতে পারেন, যেমন "Please select..." বা "Choose a car"।
- উদাহরণ:
```
<select data-bind="options: cars, value: selectedCar, optionsCaption: 'Please select a car...'"></select>
```
optionsValue:
- ডিফল্টরূপে, optionsValue প্রোপার্টি ব্যবহার করে আপনি যেকোনো মান চয়ন করতে পারবেন যেটি ড্রপডাউন অপশনগুলির থেকে এসেছে। এটি ডিফল্টভাবে value এর মানের উপর নির্ভরশীল।
- উদাহরণ:
```
<select data-bind="options: cars, value: selectedCar, optionsValue: 'id'"></select>
```

KnockoutJS এর Checkbox, Radio Button, এবং Select Option এর সাথে data binding খুবই সহজ এবং কার্যকরী। এর মাধ্যমে আপনি two-way data binding তৈরি করতে পারেন, যেখানে UI পরিবর্তন হলে ডেটা আপডেট হয় এবং ডেটা পরিবর্তিত হলে UI আপডেট হয়। KnockoutJS এর মাধ্যমে MVVM (Model-View-ViewModel) আর্কিটেকচার অনুসরণ করা হয়, যা ওয়েব ডেভেলপমেন্টে ডেটা এবং UI এর মধ্যে শক্তিশালী এবং পরিষ্কার সম্পর্ক তৈরি করতে সাহায্য করে।

Content added By

Najjar Hossain Raju

Text Input এবং Value Binding

343

KnockoutJS তে Text Input এবং Value Binding হল data binding এর একটি গুরুত্বপূর্ণ ফিচার, যা ব্যবহারকারীর ইনপুট এবং view-model এর মধ্যে two-way data binding তৈরি করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি observable ডেটা এবং ইউজারের ইনপুট ফিল্ডের মধ্যে স্বয়ংক্রিয়ভাবে যোগাযোগ স্থাপন করতে পারেন। যখন value binding ব্যবহার করা হয়, তখন কোনো ইনপুট ফিল্ডের মান পরিবর্তন হলে তা view-model এ প্রভাব ফেলবে এবং vice versa।

KnockoutJS তে Text Input এবং Value Binding

KnockoutJS তে text input এবং value binding প্রধানত input ফিল্ডগুলোর মধ্যে ব্যবহার করা হয়, যেখানে ব্যবহারকারী ডেটা ইনপুট করে এবং সেটি সরাসরি view-model এ আপডেট হয়। এটি two-way data binding এর একটি উদাহরণ।

1. Text Input Binding (Value Binding)

Text Input Binding মূলত input ফিল্ডের মান এবং observable ডেটার মধ্যে সম্পর্ক স্থাপন করে। এটি two-way binding এর মাধ্যমে কাজ করে, যেখানে observable ডেটা এবং input ফিল্ডের মান একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে।

Example: Text Input Binding

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

    <h2>Your Name: <span data-bind="text: name"></span></h2>

    <input type="text" data-bind="value: name, valueUpdate: 'input'" placeholder="Enter your name" />

    <script>
        // ViewModel
        function AppViewModel() {
            this.name = ko.observable("John Doe");  // Observable data
        }

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

</body>
</html>

Explanation:

এখানে, name একটি observable ডেটা। data-bind="value: name" ব্যবহার করে এটি input ফিল্ডের সাথে যুক্ত করা হয়েছে।
valueUpdate: 'input' ব্যবহার করার মাধ্যমে, ইনপুট ফিল্ডে টাইপ করার সাথে সাথে observable ডেটা আপডেট হবে, এবং এর বিপরীতও ঘটবে, অর্থাৎ name পরিবর্তিত হলে ইনপুট ফিল্ডে স্বয়ংক্রিয়ভাবে আপডেট হবে।

2. Radio Button Binding

Radio Button এর জন্য KnockoutJS এ value binding ব্যবহৃত হয়, যাতে আপনি একটি বা একাধিক বিকল্পের মধ্যে নির্বাচন করতে পারেন এবং সেই মান view-model এ প্রতিফলিত হয়। Radio button binding মূলত single-selection এর জন্য ব্যবহৃত হয়, যেখানে একাধিক বিকল্পের মধ্যে একটি নির্বাচন করা হয়।

Example: Radio Button Binding

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

    <h3>Your Favorite Color: <span data-bind="text: favoriteColor"></span></h3>

    <label><input type="radio" data-bind="value: 'Red', checked: isRed"> Red</label>
    <label><input type="radio" data-bind="value: 'Blue', checked: isBlue"> Blue</label>
    <label><input type="radio" data-bind="value: 'Green', checked: isGreen"> Green</label>

    <script>
        function AppViewModel() {
            // Observable data for color selection
            this.favoriteColor = ko.observable("Red");

            // KnockoutJS binds radio buttons using checked and value bindings
            this.isRed = ko.computed(function() {
                return this.favoriteColor() === "Red";
            }, this);
            this.isBlue = ko.computed(function() {
                return this.favoriteColor() === "Blue";
            }, this);
            this.isGreen = ko.computed(function() {
                return this.favoriteColor() === "Green";
            }, this);
        }

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

</body>
</html>

Explanation:

এখানে, favoriteColor একটি observable ডেটা। এটি radio buttons এর মানের সাথে যুক্ত থাকে।
checked এবং value বाइন্ডিং ব্যবহার করে radio buttons এ নির্বাচন করা মান observable এ সিঙ্ক্রোনাইজ করা হয়।
computed observables ব্যবহার করা হয়েছে যাতে আমরা রেড, ব্লু বা গ্রিন বিকল্পগুলির জন্য সঠিক radio button নির্বাচন করতে পারি।

3. Select Option Binding

Select option binding হল যখন আপনি একটি select dropdown এর মানকে observable ডেটার সাথে যুক্ত করেন। এটি single-selection এর জন্য ব্যবহৃত হয়, যেখানে ব্যবহারকারী একটি অপশন নির্বাচন করতে পারে।

Example: Select Option Binding

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

    <h3>Selected Country: <span data-bind="text: selectedCountry"></span></h3>

    <select data-bind="options: countries, value: selectedCountry"></select>

    <script>
        function AppViewModel() {
            // Observable data for selected country
            this.selectedCountry = ko.observable();

            // List of countries for the select dropdown
            this.countries = ko.observableArray(["USA", "Canada", "India", "UK", "Australia"]);
        }

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

</body>
</html>

Explanation:

এখানে, selectedCountry একটি observable ডেটা যা select অপশনের মান ধারণ করে।
options বাইন্ডিং ব্যবহার করা হয়েছে যাতে আপনি observableArray ডেটা (যেমন countries) কে ড্রপডাউন অপশন হিসাবে দেখাতে পারেন।
value বাইন্ডিং দিয়ে আমরা select অপশনের সাথে selectedCountry ডেটাকে সিঙ্ক্রোনাইজ করেছি।

Advantages of Text Input and Value Binding in KnockoutJS:

Two-Way Data Binding:
- KnockoutJS এ value binding ব্যবহার করলে আপনি two-way binding পেতে পারেন, যার মাধ্যমে View এবং ViewModel একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে। এতে ইউজারের ইনপুট ও view-model এর ডেটার মধ্যে একে অপরের সাথে সরাসরি সম্পর্ক থাকে।
Declarative Syntax:
- KnockoutJS এর data binding সেন্ট্রালাইজড এবং ডিক্লেয়ারেটিভ সিনট্যাক্স ব্যবহার করে যা কোডকে পরিষ্কার এবং মেইনটেনেবল রাখে।
Automatic UI Updates:
- যখন observable ডেটা পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়, ফলে আপনাকে UI ম্যানুয়ালি আপডেট করার প্রয়োজন হয় না।
Code Reusability and Maintenance:
- KnockoutJS MVVM প্যাটার্ন ব্যবহার করে UI লজিক এবং ডেটা লজিক আলাদা রাখতে সাহায্য করে, যা কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ সহজ করে তোলে।

KnockoutJS তে Text Input, Value Binding, Radio Buttons, এবং Select Options এর মধ্যে two-way data binding ব্যবহার করে আপনি একটি ডাইনামিক, রিয়েল-টাইম ইউজার ইন্টারফেস তৈরি করতে পারেন। Value Binding মূলত ব্যবহারকারী ইন্টারঅ্যাকশন এবং ডেটার মধ্যে যোগাযোগ স্থাপন করতে ব্যবহৃত হয়, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে। KnockoutJS এর মাধ্যমে UI এবং ডেটার মধ্যে automatic synchronization সহজ হয়, যা ওয়েব ডেভেলপমেন্টে কার্যকারিতা এবং পারফরম্যান্স বাড়ায়।

Content added By

Najjar Hossain Raju

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

KnockoutJS এর Form Bindings

1. KnockoutJS Form Bindings

1.1. value Binding (Text Input)

Example:

Explanation:

1.2. checked Binding (Checkbox)

Example (Checkbox):

Explanation:

1.3. options Binding (Select Dropdown)

Example (Select Dropdown):

Explanation:

1.4. submit Binding (Form Submission)

Example (Submit Form):

Explanation:

1.5. enable Binding (Enable/Disable Input Fields)

Example (Enable/Disable):

Explanation:

Form Input এর জন্য Data Binding

1. KnockoutJS Data Binding Overview:

2. Form Input এর জন্য Basic Data Binding:

HTML Example:

3. ব্যাখ্যা:

4. Form Input এর জন্য KnockoutJS এর অন্যান্য Binding Techniques:

a. checked Binding:

b. enable and disable Binding:

c. visible and invisible Binding:

5. Advantages of Using KnockoutJS for Form Input Binding:

Checkbox এবং Radio Button Binding

1. Checkbox Data Binding

Checkbox with One-Way Binding:

Explanation:

Checkbox with Two-Way Binding:

2. Radio Button Data Binding

Radio Button Binding Example:

Explanation:

Multiple Checkboxes Binding (Array Binding)

Multiple Checkbox Binding Example:

Explanation:

Select Option Binding

1. Checkbox Binding in KnockoutJS

Example: Checkbox Binding

Explanation:

2. Radio Button Binding in KnockoutJS

Example: Radio Button Binding

Explanation:

3. Select Option Binding in KnockoutJS

Example: Select Option Binding

Explanation:

KnockoutJS তে Select Option এর অন্যান্য বৈশিষ্ট্য:

Text Input এবং Value Binding

KnockoutJS তে Text Input এবং Value Binding

1. Text Input Binding (Value Binding)

Example: Text Input Binding

2. Radio Button Binding

Example: Radio Button Binding

3. Select Option Binding

Example: Select Option Binding

Advantages of Text Input and Value Binding in KnockoutJS:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

1.1. `value` Binding (Text Input)

1.2. `checked` Binding (Checkbox)

1.3. `options` Binding (Select Dropdown)

1.4. `submit` Binding (Form Submission)

1.5. `enable` Binding (Enable/Disable Input Fields)

a. `checked` Binding:

b. `enable` and `disable` Binding:

c. `visible` and `invisible` Binding: