Loops
Loops allow you to dynamically repeat a section of HTML using server-side data. Each loop item clones the original DOM structure.
---1. Basic Loop
$item = $tpl->addLoopItem('users');
$item->pick('name')->content('John');
HTML:
<div id="users">
<span id="name"></span>
</div>
2. Multiple Items
$u1 = $tpl->addLoopItem('users');
$u1->pick('name')->content('John');
$u2 = $tpl->addLoopItem('users');
$u2->pick('name')->content('Jane');
👉 Each call creates a new row
---3. Loop with Multiple Fields
$item = $tpl->addLoopItem('users');
$item->pick('name')->content('John');
$item->pick('email')->content('john@example.com');
$item->pick('role')->content('Admin');
4. Loop with Attributes
$item = $tpl->addLoopItem('users');
$item->pick('row')
->attribute('class', 'table-row active');
5. Loop with Nested Elements
HTML:
<div id="users">
<div class="card">
<h5 id="name"></h5>
<p id="email"></p>
</div>
</div>
Works automatically — structure is cloned.
---6. Loop with Includes
$item = $tpl->addLoopItem('users');
$card = $item->include('#card', 'user-card');
$card->pick('name')->content('John');
Includes inside loops are fully supported.
---
7. Loop with Slots (Advanced)
$item = $tpl->addLoopItem('users');
$child = $item->slot('content', 'user-details');
$child->pick('name')->content('John');
Nested templates inside loops are supported.
---
8. Loop + Vue (Recommended Usage)
Use loops for initial render, Vue for dynamic updates.
<tr v-for="user in users">
<td>{{ user.name }}</td>
</tr>
Avoid mixing PHP loops and Vue loops for the same data.
---
9. Empty Loop (Important)
If no loop items are added:
👉 Original template is removed (no output)
Always handle empty state manually if needed.
---
10. Loop Inside Loop (Nested Loops)
$order = $tpl->addLoopItem('orders');
$order->pick('table')->content('Table 1');
$item = $order->addLoopItem('items');
$item->pick('name')->content('Pizza');
Nested loops are supported but require unique containers.
---
11. Common Mistakes
❌ Duplicate loop container IDs
❌ Using same selector outside loop
❌ Mixing Vue and PHP loops incorrectly
❌ Not adding any loop items (empty output)
---
❌ Using same selector outside loop
❌ Mixing Vue and PHP loops incorrectly
❌ Not adding any loop items (empty output)
12. Best Practices
- Use loops for initial rendering only
- Use Vue for dynamic updates
- Keep loop container unique
- Avoid deep nesting unless necessary
13. Performance Notes
- Each loop item clones DOM → avoid very large loops
- Prefer Vue for large dynamic datasets
Loops are powerful but should be used for structure, not heavy runtime logic.