Riot.js এ লিস্ট রেন্ডার করার জন্য each নির্দেশনা ব্যবহার করা হয়। এটি একটি রিয়ারেকটিভ ডাটা বাইন্ডিং ফিচার, যা ডেটার উপর ভিত্তি করে তালিকা (list) ডাইনামিকভাবে তৈরি করতে সহায়তা করে। each নির্দেশনাটি একটি Array বা Object এর উপর ইটারেট করতে ব্যবহৃত হয় এবং প্রতিটি আইটেমের জন্য HTML রেন্ডার করে।
each নির্দেশনা ব্যবহার:
each নির্দেশনার মাধ্যমে, আপনি একটি অ্যারে বা অবজেক্টের প্রতিটি আইটেমকে iterate করতে পারেন এবং প্রতিটি আইটেমের জন্য HTML তৈরি করতে পারেন।
উদাহরণ 1: Array এর উপর each নির্দেশনা
<!-- ListRender.riot -->
<list-render>
<ul>
<li each={item in items}>{item}</li>
</ul>
<script>
export default {
onMounted() {
// একটি অ্যারে তৈরি করা
this.items = ['Apple', 'Banana', 'Orange', 'Mango'];
}
}
</script>
</list-render>
এখানে, each={item in items} নির্দেশনাটি items অ্যারের প্রতিটি আইটেমকে ইটারেট করে এবং প্রতিটি আইটেমকে <li> ট্যাগে রেন্ডার করবে। item প্রতিটি লুপের আইটেমকে প্রতিনিধিত্ব করবে এবং সেই অনুযায়ী HTML তৈরি হবে।
উদাহরণ 2: Object এর উপর each নির্দেশনা
<!-- ObjectListRender.riot -->
<object-list-render>
<ul>
<li each={(key, value) in fruits}>
{key}: {value}
</li>
</ul>
<script>
export default {
onMounted() {
// একটি অবজেক্ট তৈরি করা
this.fruits = {
apple: 'Red',
banana: 'Yellow',
grape: 'Purple',
mango: 'Yellow'
};
}
}
</script>
</object-list-render>
এখানে, each={(key, value) in fruits} নির্দেশনা ব্যবহার করা হয়েছে, যেখানে fruits অবজেক্টের প্রতিটি key-value পেয়ার ইটারেট করা হচ্ছে। প্রতিটি key-value পেয়ার <li> ট্যাগে {key}: {value} এর মতো রেন্ডার হবে।
each এর অপশনাল বৈশিষ্ট্যসমূহ:
Index: আপনি যদি
eachনির্দেশনার মধ্যেindexব্যবহার করতে চান, তবে এটি অ্যারে বা অবজেক্টের ইন্ডেক্স/পজিশন প্রদান করবে। এটি লুপে প্রতিটি আইটেমের অবস্থান পাওয়ার জন্য ব্যবহার করা যেতে পারে।উদাহরণ:
<ul> <li each={item, index in items}> {index + 1}. {item} </li> </ul>
উদাহরণ 3: ডাইনামিক লিস্ট রেন্ডারিং (ডাটা আপডেট করা হলে রেন্ডার)
<!-- DynamicListRender.riot -->
<dynamic-list-render>
<button onclick={addItem}>Add Item</button>
<ul>
<li each={item in items}>{item}</li>
</ul>
<script>
export default {
onMounted() {
this.items = ['Item 1', 'Item 2', 'Item 3'];
},
addItem() {
this.items.push('New Item');
}
}
</script>
</dynamic-list-render>
এখানে, addItem ফাংশনটি কল করার মাধ্যমে নতুন একটি আইটেম items অ্যারেতে যোগ করা হয় এবং each নির্দেশনার মাধ্যমে লিস্ট পুনরায় রেন্ডার হয়। Riot.js এর রিয়ারেকটিভ বাইন্ডিংয়ের কারণে, অ্যারে আপডেট হওয়া মাত্রই UI আপডেট হবে।
সারাংশ:
eachনির্দেশনা Riot.js এ অ্যারে বা অবজেক্টের উপাদানগুলির উপর ইটারেট করার জন্য ব্যবহৃত হয়।- এটি ডাইনামিক এবং রিয়ারেকটিভ ডাটা বাইন্ডিংয়ের মাধ্যমে UI রেন্ডারিং সহজ করে তোলে।
eachনির্দেশনাটি ব্যবহার করে আপনি লিস্ট বা টেবিলের মতো ডাটা সঠিকভাবে এবং স্বয়ংক্রিয়ভাবে রেন্ডার করতে পারেন, এবং ডাটা পরিবর্তন হলে UI আপডেট হয়।
Read more
