RIOT.js এ ফর্ম তৈরি এবং ডেটা Binding

Riot.js এ ফর্ম তৈরি এবং ডেটা বাইন্ডিং খুবই সহজ এবং শক্তিশালী। Riot.js এর রিয়েকটিভ ডাটা বাইন্ডিং সিস্টেমের মাধ্যমে আপনি ফর্মের ইনপুট ক্ষেত্রগুলোর মান এবং UI এর মধ্যে ডেটা সিঙ্ক্রোনাইজ করতে পারেন, যা ফর্ম ব্যবস্থাপনা এবং ইনপুটের মাধ্যমে ডেটা আপডেট করার কাজকে খুবই সহজ করে তোলে।

১. ফর্ম তৈরি

ফর্ম তৈরি করার সময় সাধারণত ইনপুট, সিলেক্ট, রেডিও বাটন, চেকবক্স, এবং সাবমিট বাটন সহ বিভিন্ন HTML এলিমেন্ট ব্যবহার করা হয়। Riot.js ব্যবহার করে আপনি খুব সহজেই এই উপাদানগুলোকে কম্পোনেন্টের মধ্যে যুক্ত করতে পারেন।

উদাহরণ: একটি সাধারণ ফর্ম তৈরি

ধরা যাক, একটি ফর্ম তৈরি করতে চাই, যেখানে ব্যবহারকারী তার নাম এবং বয়স ইনপুট দিতে পারবে, এবং সাবমিট বাটন চাপলে এই ডেটা কনসোলে প্রিন্ট হবে।

<!-- FormComponent.riot -->
<form-component>
  <form onsubmit={submitForm}>
    <label for="name">Name:</label>
    <input type="text" id="name" bind={name} />

    <label for="age">Age:</label>
    <input type="number" id="age" bind={age} />

    <button type="submit">Submit</button>
  </form>

  <script>
    export default {
      name: '',
      age: '',

      submitForm(e) {
        e.preventDefault();  // Form submission এর ডিফল্ট আচরণ বন্ধ করে
        console.log('Name:', this.name);
        console.log('Age:', this.age);
      }
    }
  </script>
</form-component>

ব্যাখ্যা:

1. ফর্ম এলিমেন্ট: এখানে একটি form তৈরি করা হয়েছে, যার মধ্যে দুটি ইনপুট ফিল্ড (name এবং age) রয়েছে।
2. ডেটা বাইন্ডিং: bind={name} এবং bind={age} এর মাধ্যমে ইনপুট ফিল্ডগুলোকে name এবং age প্রপার্টির সাথে বাইন্ড করা হয়েছে। এর মাধ্যমে, ইনপুটের মান পরিবর্তিত হলে তা সরাসরি কম্পোনেন্টের স্টেটে রিফ্লেক্ট হবে।
3. ফর্ম সাবমিশন: submitForm ফাংশনটি সাবমিট ইভেন্টের জন্য ডিফাইন করা হয়েছে, যা ডেটাকে কনসোলে প্রিন্ট করবে এবং ডিফল্ট সাবমিশন আচরণ (পেজ রিফ্রেশ) প্রতিরোধ করবে।

২. ডেটা বাইন্ডিং (Data Binding)

Riot.js-এর ডেটা বাইন্ডিং সিস্টেমের মাধ্যমে আপনি কম্পোনেন্টের মধ্যে ডেটাকে একাধিক উপাদানের মধ্যে সিঙ্ক্রোনাইজ করতে পারেন। উপরের উদাহরণে, bind অ্যাট্রিবিউট ব্যবহার করে আপনি ইনপুট ফিল্ডগুলোর মান এবং কম্পোনেন্টের স্টেটকে সিঙ্ক্রোনাইজ করেছেন।

ডেটা বাইন্ডিং এর অন্যান্য উদাহরণ:

1. টেক্সট ইনপুট ফিল্ড এবং UI আপডেট:

<!-- DataBindingExample.riot -->
<data-binding-example>
  <input type="text" bind={message} />
  <p>Your message: {message}</p>

  <script>
    export default {
      message: ''  // Initial message state

      // message এর মান ইনপুট ফিল্ডে টাইপ করলে স্বয়ংক্রিয়ভাবে <p> তে পরিবর্তিত হবে
    }
  </script>
</data-binding-example>

এখানে, ইনপুট ফিল্ডে যেকোনো পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে <p> ট্যাগে প্রতিফলিত হবে। এই সিস্টেমটি one-way data binding।

2. রেডিও বাটন এবং চেকবক্সের জন্য ডেটা বাইন্ডিং:

<!-- RadioCheckboxExample.riot -->
<radio-checkbox-example>
  <label for="option1">
    <input type="radio" id="option1" name="options" bind="option" value="Option 1" />
    Option 1
  </label>
  <label for="option2">
    <input type="radio" id="option2" name="options" bind="option" value="Option 2" />
    Option 2
  </label>

  <p>Selected Option: {option}</p>

  <script>
    export default {
      option: ''  // Initially no option selected
    }
  </script>
</radio-checkbox-example>

এখানে, রেডিও বাটন ব্যবহার করে option স্টেটের মানকে সিঙ্ক্রোনাইজ করা হয়েছে। যেহেতু bind="option" করা হয়েছে, যেকোনো রেডিও বাটন সিলেক্ট করলে option প্রপার্টি আপডেট হবে এবং UI তে সেই পরিবর্তন দেখা যাবে।

৩. চেকবক্সের জন্য ডেটা বাইন্ডিং:

<!-- CheckboxExample.riot -->
<checkbox-example>
  <label>
    <input type="checkbox" bind="isChecked" /> I agree to the terms
  </label>
  <p>Checked: {isChecked}</p>

  <script>
    export default {
      isChecked: false  // Initially unchecked
    }
  </script>
</checkbox-example>

এখানে, isChecked স্টেটটি চেকবক্সের মানের সাথে বাইন্ড করা হয়েছে। চেকবক্সটি চেক করা হলে isChecked প্রপার্টি true হয়ে যাবে এবং না থাকলে false থাকবে।

৪. ফর্ম ভ্যালিডেশন

ফর্মের ইনপুট ভ্যালিডেশন করতে হলে আপনি একটি শর্ত যোগ করতে পারেন, যেমন যদি নাম ইনপুট ফিল্ড খালি থাকে, তবে সাবমিট করা যাবে না।

<!-- FormValidationExample.riot -->
<form-validation-example>
  <form onsubmit={submitForm}>
    <label for="name">Name:</label>
    <input type="text" id="name" bind={name} />

    <button type="submit" disabled={name.trim() === ''}>Submit</button>
  </form>

  <script>
    export default {
      name: '',

      submitForm(e) {
        e.preventDefault();
        if (this.name.trim() !== '') {
          console.log('Name:', this.name);
        }
      }
    }
  </script>
</form-validation-example>

এখানে, disabled অ্যাট্রিবিউট ব্যবহার করা হয়েছে সাবমিট বাটনকে নির্ধারণ করতে যে, যদি নাম ফিল্ড খালি থাকে, তবে বাটনটি ডিজেবল হয়ে যাবে।

Riot.js-এ ফর্ম তৈরি এবং ডেটা বাইন্ডিং খুবই সহজ। আপনি bind অ্যাট্রিবিউট ব্যবহার করে ইনপুট ফিল্ড এবং কম্পোনেন্ট স্টেটের মধ্যে ডেটা সিঙ্ক্রোনাইজ করতে পারেন, যা UI কে রিয়েকটিভ করে তোলে। আপনি ডেটা বাইন্ডিং ব্যবহার করে ফর্মের বিভিন্ন ইনপুট, রেডিও বাটন, চেকবক্স, এবং অন্যান্য উপাদানগুলি পরিচালনা করতে পারেন। এছাড়া, Riot.js-এর সাহায্যে ফর্ম ভ্যালিডেশন, সাবমিশন এবং ডেটা পরিবর্তনের জন্য খুব সহজভাবে কোড লেখা সম্ভব।