Riot.js তে Input এবং Form Elements এর Data Binding সহজ এবং সরল। Riot.js-এ আপনি ইনপুট ফিল্ডগুলো (যেমন <input>, <textarea>, <select> ইত্যাদি) সাথে two-way data binding ব্যবহার করতে পারেন। এর মাধ্যমে, ব্যবহারকারী যখন ফর্মের কোনো ইনপুট ফিল্ডে কিছু টাইপ করবে, তখন তা কম্পোনেন্টের স্টেটের সাথে সিঙ্ক্রোনাইজড থাকবে এবং আপনি সেই ডেটা স্বয়ংক্রিয়ভাবে UI-তে দেখতে পারবেন।
Riot.js তে Input এবং Form Elements এর Data Binding
Riot.js তে ইনপুট ফিল্ডগুলোর সাথে ডেটা বাইন্ডিং করার জন্য কিছু সাধারণ পদ্ধতি রয়েছে, যা two-way data binding এবং one-way data binding এর মাধ্যমে কাজ করে।
১. Two-Way Data Binding (দ্বি-দিক ডেটা বাইন্ডিং)
দ্বি-দিক ডেটা বাইন্ডিংয়ের মাধ্যমে, আপনি ইনপুট ফিল্ডে পরিবর্তন করলে তা কম্পোনেন্টের ডেটাতে (state) আপডেট হয় এবং vice versa। Riot.js তে এইটি সহজভাবে কাজ করে, কারণ যখন ডেটা পরিবর্তিত হয়, UI তে তা স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।
উদাহরণ: Text Input Field এর জন্য Two-Way Data Binding
<!-- MyComponent.riot -->
<my-component>
<input type="text" value={name} oninput={updateName} placeholder="Enter your name" />
<p>Your name is: {name}</p>
<script>
export default {
onMounted() {
this.name = ''; // Initial value for the input
},
updateName(e) {
this.name = e.target.value; // Update 'name' whenever input changes
}
}
</script>
</my-component>
ব্যাখ্যা:
- এখানে
<input>ফিল্ডেরvalueঅ্যাট্রিবিউটnameডেটার সাথে বাইন্ড করা হয়েছে। oninputইভেন্ট ব্যবহার করা হয়েছে, যা ব্যবহারকারী ইনপুট ফিল্ডে কিছু টাইপ করলেupdateNameফাংশন কল করে, যাnameডেটাকে আপডেট করে।- এর ফলে,
nameএর মান পরিবর্তন হলে UI তেnameএর মান প্রদর্শিত হবে।
২. Two-Way Data Binding with Textarea
টেক্সট এরিয়া (textarea) ইনপুট ফিল্ডের ক্ষেত্রেও একইভাবে দুটি দিকের ডেটা বাইন্ডিং ব্যবহার করা যায়।
উদাহরণ: Textarea এর জন্য Two-Way Data Binding
<!-- MyComponent.riot -->
<my-component>
<textarea oninput={updateMessage} placeholder="Type your message here">{message}</textarea>
<p>Your message: {message}</p>
<script>
export default {
onMounted() {
this.message = ''; // Initial message
},
updateMessage(e) {
this.message = e.target.value; // Update 'message' whenever textarea content changes
}
}
</script>
</my-component>
ব্যাখ্যা:
<textarea>এর ভ্যালু{message}দিয়ে বাইন্ড করা হয়েছে।oninputইভেন্ট ব্যবহার করে যখন ব্যবহারকারী কোনো টেক্সট টাইপ করবেন, তখনupdateMessageফাংশন কল হবে এবংmessageএর মান আপডেট হবে।
৩. Select Dropdown with Two-Way Data Binding
Riot.js-এ <select> ড্রপডাউন এলিমেন্টের জন্যও দুই দিকের ডেটা বাইন্ডিং ব্যবহার করা যেতে পারে।
উদাহরণ: Select Dropdown এর জন্য Two-Way Data Binding
<!-- MyComponent.riot -->
<my-component>
<select onchange={updateSelection}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<p>Your selected option is: {selectedOption}</p>
<script>
export default {
onMounted() {
this.selectedOption = 'option1'; // Default selected option
},
updateSelection(e) {
this.selectedOption = e.target.value; // Update 'selectedOption' when the selection changes
}
}
</script>
</my-component>
ব্যাখ্যা:
<select>ড্রপডাউনটিরonchangeইভেন্ট ব্যবহার করা হয়েছে।- ব্যবহারকারী যখন একটি অপশন নির্বাচন করবেন, তখন
updateSelectionফাংশন কল হবে এবংselectedOptionপরিবর্তিত হবে।
৪. Checkbox with Two-Way Data Binding
রাইট.js-এ checkbox এর ক্ষেত্রেও দ্বি-দিক ডেটা বাইন্ডিং ব্যবহার করা যেতে পারে।
উদাহরণ: Checkbox এর জন্য Two-Way Data Binding
<!-- MyComponent.riot -->
<my-component>
<label>
<input type="checkbox" checked={isChecked} onchange={toggleCheckbox} /> I agree to the terms
</label>
<p>Agreement status: {isChecked ? 'Agreed' : 'Not Agreed'}</p>
<script>
export default {
onMounted() {
this.isChecked = false; // Default state (unchecked)
},
toggleCheckbox(e) {
this.isChecked = e.target.checked; // Update 'isChecked' when checkbox state changes
}
}
</script>
</my-component>
ব্যাখ্যা:
checkedঅ্যাট্রিবিউটisCheckedস্টেটের সাথে বাইন্ড করা হয়েছে।onchangeইভেন্ট ব্যবহার করে যখন ব্যবহারকারী চেকবক্সটি চেক বা আনচেক করবেন, তখনtoggleCheckboxফাংশন কল হবে এবংisCheckedস্টেট আপডেট হবে।
৫. Form Submit Handling
Riot.js-এ ফর্ম সাবমিট করার সময়, ইনপুট ফিল্ডের মানের উপর ভিত্তি করে ডেটা প্রক্রিয়াজাত করা যায়। সাধারণত, আপনি onsubmit ইভেন্ট ব্যবহার করেন।
উদাহরণ: Form Submit with Data Binding
<!-- MyComponent.riot -->
<my-component>
<form onsubmit={submitForm}>
<input type="text" value={username} oninput={updateUsername} placeholder="Username" />
<button type="submit">Submit</button>
</form>
<p>Your username is: {username}</p>
<script>
export default {
onMounted() {
this.username = ''; // Initial value
},
updateUsername(e) {
this.username = e.target.value; // Update 'username' on input change
},
submitForm(e) {
e.preventDefault(); // Prevent default form submission
alert(`Submitted username: ${this.username}`); // Show alert on form submission
}
}
</script>
</my-component>
ব্যাখ্যা:
onsubmitইভেন্ট ফর্ম সাবমিট হওয়ার সময় চালিত হয়।e.preventDefault()ব্যবহার করা হয়েছে যাতে ফর্মের ডিফল্ট সাবমিট আচরণ আটকানো যায় এবং আপনি কাস্টম সাবমিট লজিক ব্যবহার করতে পারেন।
Riot.js-এ input এবং form elements এর data binding খুবই সরল এবং স্বচ্ছ। আপনি সহজেই two-way data binding এর মাধ্যমে ইনপুট ফিল্ডগুলো এবং ডেটার মধ্যে সিঙ্ক্রোনাইজেশন করতে পারেন, যাতে ব্যবহারকারীর ইনপুট এবং UI মধ্যে ডেটা স্বয়ংক্রিয়ভাবে আপডেট হয়। এটি আপনার ফর্ম ও ইউআই ইন্টারঅ্যাকশনকে আরও মসৃণ এবং রিয়েক্টিভ বানিয়ে তোলে।
যদি আপনার আরও কিছু প্রশ্ন থাকে বা আপনি আরও বিস্তারিত উদাহরণ চান, তাহলে আমাকে জানাতে পারেন!
Read more
