Riot.js তে Loops এবং Lists পরিচালনা করা অত্যন্ত সহজ। Riot.js আপনাকে ডাটা বাইন্ডিং এবং looping ফিচার প্রদান করে, যার মাধ্যমে আপনি সহজেই লিস্ট বা অ্যারে থেকে ডেটা প্রদর্শন করতে পারেন। এর মাধ্যমে আপনি ডাইনামিকভাবে UI তৈরি করতে পারবেন, যেমন একটি টেবিল বা লিস্ট ভিউ যা ডেটার উপর ভিত্তি করে পরিবর্তিত হয়।
১. Loops in Riot.js (Riot.js-এ লুপ)
Riot.js-এ লুপ ব্যবহারের জন্য { each } সিঙ্কট্যাক্স ব্যবহার করা হয়, যা ডাটা (অর্থাৎ অ্যারে বা অবজেক্ট) এর উপর ভিত্তি করে এলিমেন্টগুলি পুনরাবৃত্তি করে। { each } ডিরেকটিভটি ব্যবহার করলে, এটি একটি অ্যারে বা অবজেক্টের প্রতিটি আইটেমের জন্য DOM ইলিমেন্ট তৈরি করবে।
২. Each Directive (Looping with Each)
{ each } ডিরেকটিভ ব্যবহার করে আপনি সহজেই একটি অ্যারে বা লিস্টের উপর লুপ করতে পারেন। এটি একটি কন্ডিশনাল লুপের মতো কাজ করে, যেখানে আপনি একটি ডাটা অ্যারের প্রতিটি আইটেমের জন্য DOM তৈরি করতে পারেন।
উদাহরণ ১: Displaying a List using { each }
<!-- MyListComponent.riot -->
<my-list-component>
<ul>
{ each(items, (item) =>
<li>{item}</li>
)}
</ul>
<script>
export default {
onMounted() {
this.items = ['Apple', 'Banana', 'Orange', 'Mango']; // List of items
}
}
</script>
</my-list-component>
ব্যাখ্যা:
{ each(items, (item) => <li>{item}</li>) }এখানেitemsঅ্যারের প্রতিটি আইটেমের জন্য একটি<li>ট্যাগ তৈরি করছে।itemপ্রতিটি আইটেমের মান ধারণ করে যা অ্যারে থেকে নেয়া হচ্ছে।- এই কম্পোনেন্টের মাউন্টিং শেষে
itemsঅ্যারে প্রদর্শিত হবে, এবং প্রতিটি আইটেম<li>এ রেন্ডার হবে।
উদাহরণ ২: Rendering Objects with { each }
যদি আপনি একটি অবজেক্টের লিস্ট রেন্ডার করতে চান, তাহলে { each } ব্যবহার করে আপনি সেই অবজেক্টের প্রপার্টিগুলি প্রদর্শন করতে পারেন।
<!-- MyListComponent.riot -->
<my-list-component>
<ul>
{ each(items, (item) =>
<li>{item.name} - {item.price}</li>
)}
</ul>
<script>
export default {
onMounted() {
this.items = [
{ name: 'Apple', price: '$1' },
{ name: 'Banana', price: '$0.5' },
{ name: 'Orange', price: '$0.8' }
]; // List of objects
}
}
</script>
</my-list-component>
ব্যাখ্যা:
- এখানে
itemsএকটি অবজেক্টের অ্যারে, যেখানে প্রতিটি অবজেক্টেnameএবংpriceপ্রপার্টি রয়েছে। { each(items, (item) => <li>{item.name} - {item.price}</li>) }লুপ ব্যবহার করে প্রতিটি অবজেক্টেরnameএবংpriceপ্রদর্শিত হচ্ছে।
৩. Using Index with { each }
প্রয়োজনে আপনি লুপের মধ্যে index ব্যবহার করতে পারেন, যাতে প্রতিটি আইটেমের পজিশন বা ইনডেক্স জানতে পারেন।
উদাহরণ ৩: Accessing Index with { each }
<!-- MyListComponent.riot -->
<my-list-component>
<ul>
{ each(items, (item, index) =>
<li>{index + 1}. {item}</li>
)}
</ul>
<script>
export default {
onMounted() {
this.items = ['Apple', 'Banana', 'Orange', 'Mango']; // List of items
}
}
</script>
</my-list-component>
ব্যাখ্যা:
{ each(items, (item, index) => <li>{index + 1}. {item}</li>) }এখানেindexব্যবহার করা হয়েছে, যা প্রতিটি আইটেমের অবস্থান নির্দেশ করে।{index + 1}দিয়ে ইনডেক্স ১ থেকে শুরু করা হচ্ছে (ডিফল্টভাবে ইনডেক্স শূন্য থেকে শুরু হয়)।
৪. Conditional Rendering Inside { each }
আপনি লুপের মধ্যে কন্ডিশনাল রেন্ডারিংও করতে পারেন, যাতে নির্দিষ্ট শর্তে কিছু আইটেম রেন্ডার করা হয় বা লুকানো থাকে।
উদাহরণ ৪: Conditional Rendering Inside Loop
<!-- MyListComponent.riot -->
<my-list-component>
<ul>
{ each(items, (item) =>
item.available ? <li>{item.name} - Available</li> : <li>{item.name} - Out of Stock</li>
)}
</ul>
<script>
export default {
onMounted() {
this.items = [
{ name: 'Apple', available: true },
{ name: 'Banana', available: false },
{ name: 'Orange', available: true }
]; // List with availability status
}
}
</script>
</my-list-component>
ব্যাখ্যা:
{ each(items, (item) => item.available ? <li>{item.name} - Available</li> : <li>{item.name} - Out of Stock</li>) }- এখানে একটি কন্ডিশনাল রেন্ডারিং ব্যবহার করা হয়েছে, যাতে যদি
item.availableসত্য হয়, তাহলে "Available" দেখাবে, আর যদি মিথ্যা হয়, তাহলে "Out of Stock" দেখাবে।
৫. Empty State (Empty List Handling)
লিস্টে কোন আইটেম না থাকলে আপনি একটি empty state বা ডিফল্ট মেসেজ প্রদর্শন করতে পারেন।
উদাহরণ ৫: Empty State with { each }
<!-- MyListComponent.riot -->
<my-list-component>
<ul>
{ each(items, (item) =>
<li>{item}</li>
)}
</ul>
{ items.length === 0 && <p>No items available</p> }
<script>
export default {
onMounted() {
this.items = []; // Empty list initially
}
}
</script>
</my-list-component>
ব্যাখ্যা:
{ items.length === 0 && <p>No items available</p> }এই শর্তের মাধ্যমে যদিitemsঅ্যারে ফাঁকা থাকে, তাহলে "No items available" মেসেজ প্রদর্শিত হবে।
Riot.js-এ loops এবং lists পরিচালনা করা খুবই সহজ। { each } ডিরেকটিভের মাধ্যমে আপনি অ্যারে বা অবজেক্টের উপরে লুপ করতে পারেন এবং ডাইনামিকভাবে UI তৈরি করতে পারেন। আপনি index, conditional rendering, এবং empty states সহ লুপ ব্যবহার করে অত্যন্ত ফ্লেক্সিবল এবং রিয়েক্টিভ ইউআই তৈরি করতে পারেন।
Riot.js-এ লুপ পরিচালনা খুবই সহজ এবং সরল। আপনি লুপ পরিচালনা করতে each ডিরেকটিভ ব্যবহার করতে পারেন, যা আপনাকে একটি অ্যারে বা অবজেক্টের মাধ্যমে পুনরাবৃত্তি (loop) করতে সাহায্য করে। এটি আপনাকে ডাইনামিকভাবে এলিমেন্টগুলি তৈরি করতে দেয় এবং যখন ডেটা পরিবর্তন হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়।
Riot.js-এ লুপ পরিচালনার মূল ধারণা:
eachডিরেকটিভ:- Riot.js-এ
eachডিরেকটিভ একটি অ্যারে বা অবজেক্টের উপর লুপ চালাতে ব্যবহৃত হয়। - এটি একটি এক্সপ্রেশন যা একটি তালিকা বা অ্যারের প্রতিটি আইটেমের জন্য একটি HTML উপাদান তৈরি করে।
eachডিরেকটিভ ব্যবহার করার সময়, আপনি একটি আইটেম এবং তার ইনডেক্স বা কী (যদি অবজেক্ট থাকে) অ্যাক্সেস করতে পারবেন।
- Riot.js-এ
- ডাটা বাইন্ডিং:
- Riot.js-এ ডাটা বাইন্ডিং সাপোর্ট করার কারণে, যখন লুপ করা ডেটা পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে রেন্ডার হয় এবং নতুন ডেটা প্রদর্শন করা হয়।
লুপ পরিচালনার উদাহরণ:
নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি অ্যারে এর উপাদানগুলোর উপর লুপ চালানো হচ্ছে এবং তাদের UI তে প্রদর্শন করা হচ্ছে।
<!-- ItemList.riot -->
<item-list>
<ul>
<li each={item in items}>{item}</li>
</ul>
<script>
export default {
onMounted() {
this.items = ['Apple', 'Banana', 'Orange', 'Mango'];
}
}
</script>
</item-list>
এখানে:
<li each={item in items}>{item}</li>: এটিitemsঅ্যারের প্রতিটি আইটেমের জন্য একটি<li>এলিমেন্ট তৈরি করবে এবং আইটেমটি সেখানে প্রদর্শন করবে।this.items = ['Apple', 'Banana', 'Orange', 'Mango'];:itemsঅ্যারেটিonMountedলাইফসাইকেল হুকে সেট করা হয়েছে।
আরও উন্নত উদাহরণ (অবজেক্টের উপর লুপ চালানো):
এখন আমরা একটি অবজেক্টের উপর লুপ চালানোর উদাহরণ দেখব যেখানে অ্যারেতে অবজেক্টের মানগুলো বের করা হবে।
<!-- EmployeeList.riot -->
<employee-list>
<ul>
<li each={employee in employees}>
{employee.name} - {employee.position}
</li>
</ul>
<script>
export default {
onMounted() {
this.employees = [
{ name: 'John Doe', position: 'Software Engineer' },
{ name: 'Jane Smith', position: 'Project Manager' },
{ name: 'Alex Johnson', position: 'UX Designer' }
];
}
}
</script>
</employee-list>
এখানে:
each={employee in employees}: এটিemployeesঅ্যারের প্রতিটি অবজেক্টের জন্য লুপ করবে এবং প্রত্যেকটি অবজেক্টেরnameএবংpositionপ্রপার্টি UI তে দেখাবে।
each ডিরেকটিভের আরও বৈশিষ্ট্য:
- আইটেমের ইনডেক্স/কী: আপনি যদি অবজেক্টের আইটেমের ইনডেক্স বা কী দেখতে চান, তাহলে আপনি এটি
eachডিরেকটিভে এইভাবে অ্যাক্সেস করতে পারেন:
<!-- ItemListWithIndex.riot -->
<item-list-with-index>
<ul>
<li each={item, index in items}>{index + 1}. {item}</li>
</ul>
<script>
export default {
onMounted() {
this.items = ['Apple', 'Banana', 'Orange', 'Mango'];
}
}
</script>
</item-list-with-index>
এখানে:
{index + 1}: এটি আইটেমের ইনডেক্স প্রদর্শন করবে, যাতে আপনি দেখতে পারবেন প্রতি আইটেমের সিরিয়াল নম্বর।
- কী ব্যবহার করা (অবজেক্টের জন্য): যখন আপনি একটি অবজেক্টের উপর লুপ করবেন, তখন আপনি
keyব্যবহার করতে পারেন যাতে আপনাকে অনন্য আইডেন্টিফায়ার দেওয়া যায়:
<!-- ObjectKeyExample.riot -->
<object-key-example>
<ul>
<li each={value, key in items}>
{key}: {value.name} - {value.position}
</li>
</ul>
<script>
export default {
onMounted() {
this.items = {
emp1: { name: 'John', position: 'Engineer' },
emp2: { name: 'Jane', position: 'Manager' },
emp3: { name: 'Alex', position: 'Designer' }
};
}
}
</script>
</object-key-example>
এখানে:
each={value, key in items}: এটিitemsঅবজেক্টের প্রতিটি কী-value পেয়ার লুপ করবে, যেখানেkeyহল অবজেক্টের কী এবংvalueহল অবজেক্টের মান (যেমন, কর্মচারীর নাম এবং পদবী)।
সর্বশেষ টিপস:
- ডাটা পরিবর্তন: যেহেতু Riot.js রিয়েকটিভ ডাটা বাইন্ডিং সাপোর্ট করে, ডেটার পরিবর্তন UI তে স্বয়ংক্রিয়ভাবে প্রতিফলিত হবে। উদাহরণস্বরূপ, যদি
itemsঅ্যারের মধ্যে নতুন আইটেম যোগ করা হয়, তবে UI তে তা স্বয়ংক্রিয়ভাবে দেখা যাবে। keyঅ্যাট্রিবিউট: কখনও কখনও লুপের আইটেমের জন্যkeyঅ্যাট্রিবিউট ব্যবহার করা প্রয়োজন হতে পারে, বিশেষত যখন আপনি কম্পোনেন্টের ভিতরে অনেক ডাইনামিক আইটেম দেখাচ্ছেন।
Riot.js-এ লুপ পরিচালনা অত্যন্ত সহজ এবং ডাটা বাইন্ডিং এর মাধ্যমে আপনি খুব দ্রুত এবং দক্ষভাবে ডাইনামিক UI তৈরি করতে পারবেন। আপনি each ডিরেকটিভ ব্যবহার করে অ্যারে বা অবজেক্টের উপর লুপ চালাতে পারেন, এবং যখন ডেটা পরিবর্তিত হয় তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়।
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 আপডেট হয়।
Riot.js-এ লিস্ট আইটেমের মধ্যে কাস্টম ইভেন্ট হ্যান্ডল করার মাধ্যমে আপনি প্রতিটি আইটেমের সাথে ইন্টারঅ্যাকশন করতে পারেন এবং প্রতিটি আইটেমের জন্য আলাদা ইভেন্ট ট্রিগার করতে পারেন। এটি সাধারণত ডায়নামিক লিস্ট তৈরি করার সময় খুবই সহায়ক, যেখানে প্রতিটি আইটেমের জন্য আলাদা আলাদা কার্যকলাপ (actions) ট্রিগার করতে হয়।
এখানে একটি উদাহরণ দেওয়া হলো যেখানে একটি লিস্টের মধ্যে কাস্টম ইভেন্ট হ্যান্ডল করা হচ্ছে। আমরা একটি লিস্ট তৈরি করব, যেখানে প্রতিটি আইটেমের জন্য একটি কাস্টম ইভেন্ট হ্যান্ডল করা হবে।
উদাহরণ: লিস্ট আইটেমের মধ্যে কাস্টম ইভেন্ট হ্যান্ডল করা
১. কম্পোনেন্ট তৈরি করুন (ListComponent.riot)
<!-- ListComponent.riot -->
<list-component>
<h2>Items List</h2>
<ul>
<li each={item in items} onclick={handleItemClick(item)}>
{item.name}
</li>
</ul>
<script>
export default {
onMounted() {
// লিস্টের আইটেম ইনিশিয়ালাইজ করা
this.items = [
{ name: 'Item 1', description: 'This is item 1' },
{ name: 'Item 2', description: 'This is item 2' },
{ name: 'Item 3', description: 'This is item 3' }
];
},
handleItemClick(item) {
// কাস্টম ইভেন্ট ট্রিগার করা
this.trigger('itemClicked', item);
}
}
</script>
</list-component>
ব্যাখ্যা:
- HTML: এখানে
eachডিরেকটিভ ব্যবহার করা হয়েছে যাitemsঅ্যারে থেকে প্রতিটি আইটেম রেন্ডার করবে। - কাস্টম ইভেন্ট:
handleItemClickফাংশনটি ক্লিক হওয়ার পর কাস্টম ইভেন্ট'itemClicked'ট্রিগার করে এবং সংশ্লিষ্টitemডেটা পাস করে।
২. অন্য কম্পোনেন্টে কাস্টম ইভেন্ট শোনা (ParentComponent.riot)
<!-- ParentComponent.riot -->
<parent-component>
<list-component></list-component>
<h3>Selected Item: {selectedItem.name}</h3>
<script>
export default {
onMounted() {
// 'itemClicked' ইভেন্ট শোনা
this.on('itemClicked', (item) => {
this.selectedItem = item;
});
}
}
</script>
</parent-component>
ব্যাখ্যা:
- এখানে
ParentComponentকম্পোনেন্টে'itemClicked'ইভেন্ট শোনা হচ্ছে এবং যখন কোনো আইটেম ক্লিক হবে, তখনselectedItemসেট করা হবে। - এটি প্রমাণ করে যে কাস্টম ইভেন্টের মাধ্যমে এক কম্পোনেন্ট থেকে আরেক কম্পোনেন্টে ডেটা বা ইনফরমেশন প্রেরণ করা হচ্ছে।
কাস্টম ইভেন্ট এবং লিস্ট আইটেমের মধ্যে আরও ইন্টারঅ্যাকশন
আপনি লিস্ট আইটেমের মধ্যে বিভিন্ন ইভেন্ট তৈরি করতে পারেন। যেমন, একটি আইটেমের জন্য একটি ডিলিট বাটন তৈরি করা, যেখানে সেই বাটনে ক্লিক করলে একটি কাস্টম ইভেন্ট ট্রিগার হবে এবং আইটেমটি লিস্ট থেকে বাদ দেওয়া হবে।
উদাহরণ: ডিলিট বাটন এবং কাস্টম ইভেন্ট
<!-- ListComponent.riot -->
<list-component>
<h2>Items List</h2>
<ul>
<li each={item in items}>
{item.name}
<button onclick={deleteItem(item)}>Delete</button>
</li>
</ul>
<script>
export default {
onMounted() {
this.items = [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
];
},
deleteItem(item) {
// কাস্টম ইভেন্ট ট্রিগার করা যখন একটি আইটেম ডিলিট হবে
this.trigger('itemDeleted', item);
}
}
</script>
</list-component>
এখন, ParentComponent থেকে এই ইভেন্টটি শোনা হবে:
<!-- ParentComponent.riot -->
<parent-component>
<list-component></list-component>
<h3>Deleted Item: {deletedItem.name}</h3>
<script>
export default {
onMounted() {
// 'itemDeleted' ইভেন্ট শোনা
this.on('itemDeleted', (item) => {
this.deletedItem = item;
});
}
}
</script>
</parent-component>
এখানে:
- একটি ডিলিট বাটন তৈরি করা হয়েছে প্রতিটি আইটেমের জন্য।
- যখন বাটনে ক্লিক হবে, তখন
'itemDeleted'কাস্টম ইভেন্ট ট্রিগার হবে এবং ডিলিট হওয়া আইটেমটিdeletedItemহিসেবেParentComponent-এ পাঠানো হবে।
Riot.js-এ লিস্ট আইটেমের মধ্যে কাস্টম ইভেন্ট হ্যান্ডল করা খুবই সহজ এবং কার্যকরী। আপনি this.trigger() ব্যবহার করে কাস্টম ইভেন্ট ট্রিগার করতে পারেন এবং this.on() দিয়ে সেই ইভেন্টগুলো শোনার মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং রিয়েকটিভ করতে পারেন। এটি আপনাকে ডায়নামিক এবং ব্যবহারকারী ভিত্তিক ওয়েব অ্যাপ্লিকেশন তৈরিতে সহায়তা করবে, যেখানে প্রতিটি আইটেমের জন্য আলাদা আলাদা কার্যকলাপ ট্রিগার করা সম্ভব।
Riot.js এ Dynamic List Update এবং Refresh করা খুবই সহজ এবং একে একে অটোমেটিক রেন্ডারিংয়ের মাধ্যমে করা যায়। Riot.js এর ডাটা বাইন্ডিং সিস্টেম এবং ইভেন্ট ব্যবস্থাপনার মাধ্যমে আপনি সহজেই একটি লিস্টের উপাদানগুলো অ্যাড, ডিলিট অথবা আপডেট করতে পারবেন এবং UI স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে।
Dynamic List Update এবং Refresh
ধরা যাক, আপনি একটি ডাইনামিক লিস্ট তৈরি করতে চান যেখানে আপনি আইটেমগুলো যোগ, মুছে ফেলতে বা আপডেট করতে পারবেন। Riot.js এর ডাটা বাইন্ডিং ব্যবহার করে এই কাজগুলো খুব সহজেই করা যায়।
১. ডাটা বাইন্ডিং এবং লিস্টের আইটেম রেন্ডারিং
Riot.js তে একটি ডাটা অ্যারে বা অবজেক্টকে বাইন্ড করা হয় এবং সেই অনুযায়ী ডাটা পরিবর্তন হলে UI আপডেট হয়ে যায়। আমরা নিচে একটি ডাইনামিক লিস্টের উদাহরণ দেখবো যেখানে আইটেমগুলো অ্যাড এবং রিমুভ করা যায়।
Example: Dynamic List
List.riot (কম্পোনেন্ট):
<!-- List.riot -->
<list-component>
<h2>Dynamic List</h2>
<ul>
<li each={item in items}>
{item}
<button onclick={removeItem(item)}>Remove</button>
</li>
</ul>
<input ref={input} type="text" placeholder="Add item" />
<button onclick={addItem}>Add Item</button>
<script>
export default {
items: [], // ডাইনামিক আইটেমগুলি
addItem() {
const newItem = this.refs.input.value;
if (newItem) {
this.items.push(newItem); // নতুন আইটেম অ্যাড করা
this.refs.input.value = ''; // ইনপুট ক্লিয়ার করা
}
},
removeItem(item) {
this.items = this.items.filter(i => i !== item); // আইটেম রিমুভ করা
}
}
</script>
</list-component>
এখানে:
<ul><li each={item in items}>:eachডিরেকটিভ ব্যবহার করেitemsঅ্যারে থেকে প্রতিটি আইটেমকে লুপ করে দেখানো হচ্ছে।this.items.push(newItem):addItemফাংশনে ইনপুট থেকে নতুন আইটেম নেয়া হচ্ছে এবংitemsঅ্যারে তে যোগ করা হচ্ছে।this.items = this.items.filter(i => i !== item):removeItemফাংশনে একটি নির্দিষ্ট আইটেম রিমুভ করা হচ্ছে।
২. List Update (UI Refresh)
Riot.js এর ডাটা বাইন্ডিং ফিচারটি স্বয়ংক্রিয়ভাবে লিস্ট আপডেট করে যখন আপনি items অ্যারেতে কোন পরিবর্তন করেন। উদাহরণস্বরূপ:
- অ্যাড: নতুন আইটেম অ্যাড করলে লিস্ট স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে।
- রিমুভ: একটি আইটেম মুছে ফেললে UI তাও স্বয়ংক্রিয়ভাবে আপডেট হবে।
Riot.js এর reactive data binding সিস্টেমের মাধ্যমে ডাটা পরিবর্তন হলে UI তৎক্ষণাৎ আপডেট হয়ে যায়, এবং আপনাকে DOM ম্যানিপুলেশন করার দরকার পড়ে না।
৩. এনিমেশন (ঐচ্ছিক)
আপনি চাইলে ডাইনামিক লিস্টের আইটেম অ্যাড বা রিমুভ করার সময় কিছু অ্যানিমেশনও যোগ করতে পারেন। উদাহরণস্বরূপ, একটি আইটেম রিমুভ করার সময় একটি স্লাইডিং বা ফেডিং অ্যানিমেশন ব্যবহার করা যেতে পারে। Riot.js এই ধরনের অ্যানিমেশন সমর্থন করে, যদিও এর জন্য কিছু অতিরিক্ত CSS কোড প্রয়োজন হতে পারে।
/* ফেড আউট অ্যানিমেশন */
li.removed {
animation: fadeOut 0.5s forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
এখানে removed ক্লাস যোগ করার মাধ্যমে আইটেমটি অ্যানিমেটেডভাবে অদৃশ্য হবে।
৪. List Update with Objects (অবজেক্টের সাথে ডাইনামিক লিস্ট)
আপনি যদি লিস্টে অবজেক্ট ব্যবহার করেন, যেমন নাম, বয়স, বা অন্যান্য ডেটা, তবে আপনি একইভাবে সেগুলোকে ডাইনামিকালি আপডেট করতে পারবেন।
Example: Dynamic List with Objects
<!-- ObjectList.riot -->
<object-list>
<h2>User List</h2>
<ul>
<li each={user in users}>
{user.name} - {user.age}
<button onclick={removeUser(user)}>Remove</button>
</li>
</ul>
<input ref={nameInput} type="text" placeholder="Name" />
<input ref={ageInput} type="number" placeholder="Age" />
<button onclick={addUser}>Add User</button>
<script>
export default {
users: [], // ডাইনামিক ইউজার লিস্ট
addUser() {
const name = this.refs.nameInput.value;
const age = this.refs.ageInput.value;
if (name && age) {
this.users.push({ name, age }); // নতুন ইউজার অ্যাড করা
this.refs.nameInput.value = ''; // ইনপুট ক্লিয়ার করা
this.refs.ageInput.value = '';
}
},
removeUser(user) {
this.users = this.users.filter(u => u !== user); // ইউজার রিমুভ করা
}
}
</script>
</object-list>
এখানে:
usersঅ্যারেতে অবজেক্টের তালিকা রাখা হচ্ছে (নাম এবং বয়স সহ)।addUserফাংশনে নতুন ইউজার অ্যাড করা হচ্ছে এবংremoveUserফাংশনে একটি নির্দিষ্ট ইউজার রিমুভ করা হচ্ছে।
৫. List Sort বা Filter (অবজেক্ট বা ডাটা সাজানো বা ফিল্টার করা)
ডাইনামিক লিস্টে আপনি চাইলে ডাটা সাজানো বা ফিল্টারও করতে পারেন। Riot.js তে এটি খুব সহজ। নিচে একটি উদাহরণ দেওয়া হল যেখানে একটি লিস্টকে নাম অনুসারে সাজানো হচ্ছে:
Example: Sort List
<!-- SortedList.riot -->
<sorted-list>
<h2>Sorted List</h2>
<ul>
<li each={item in sortedItems}>
{item.name} - {item.age}
</li>
</ul>
<button onclick={sortByName}>Sort by Name</button>
<script>
export default {
items: [
{ name: 'John', age: 30 },
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 35 }
],
get sortedItems() {
return this.items.sort((a, b) => a.name.localeCompare(b.name)); // নাম অনুসারে সাজানো
},
sortByName() {
// এখানে আর কোনো কাজ করার প্রয়োজন নেই, `sortedItems` অ্যাক্সেস করলেই লিস্ট সোর্ট হয়ে যাবে
}
}
</script>
</sorted-list>
এখানে, sortedItems একটি গেটর (getter) হিসেবে কাজ করছে, যা items অ্যারেকে নাম অনুসারে সাজিয়ে দেখাবে। যখনই sortByName ফাংশন কল হবে, তখন লিস্টটি নতুন করে সাজানো হবে এবং UI স্বয়ংক্রিয়ভাবে আপডেট হবে।
সারাংশ
Riot.js তে Dynamic List Update এবং Refresh করা খুবই সহজ। আপনি ডাটা বাইন্ডিং এবং each ডিরেকটিভের মাধ্যমে ডাইনামিক লিস্ট তৈরি করতে পারেন এবং ডাটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়। নতুন আইটেম অ্যাড করা, রিমুভ করা বা সাজানো সব কিছুই সহজেই করা যায়। Riot.js এর ডাটা বাইন্ডিং সিস্টেমের মাধ্যমে আপনি খুব কম কোডে জটিল লজিক এবং ইউজার ইন্টারঅ্যাকশন ম্যানেজ করতে পারেন।
Read more
