Lists & Iteration
WildflowerJS renders arrays as dynamic lists using data-list and HTML <template> elements, automatically updating only the items that change.
💡 Key Concept: WildflowerJS automatically renders arrays as lists, updating only changed items for optimal performance.
Not every list needs
data-list. It gives you per-item reactivity and keyed diffing, which many lists do not use. If your list is static, a filtered view, or made of self-contained interactive rows, a lighter pattern may fit better. See Do You Need data-list?
Basic List Rendering
Use data-list to render arrays with HTML templates:
<div data-component="simple-list">
<p class="text-muted">Demonstrates basic list operations with automatic updates.</p>
<div class="mb-3">
<button data-action="addItem" class="btn btn-primary me-2">
Add Item
</button>
<button data-action="addMultiple" class="btn btn-success me-2">
Add 3 Items
</button>
<button data-action="shuffle" class="btn btn-secondary me-2">
Shuffle Order
</button>
<button data-action="clearAll" class="btn btn-danger">
Clear All
</button>
</div>
<div class="row mb-3">
<div class="col-md-8">
<p><strong>Total items:</strong> <span data-bind="itemCount" class="badge bg-primary"></span></p>
</div>
<div class="col-md-4">
<small class="text-muted">Next ID: <span data-bind="nextId"></span></small>
</div>
</div>
<!-- List with HTML template -->
<ul class="list-group" data-list="items">
<template>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center flex-grow-1">
<span class="badge bg-secondary me-3">#<span data-bind="id"></span></span>
<div>
<strong data-bind="name"></strong>
<br>
<small class="text-muted">
Created: <span data-bind="created"></span>
</small>
</div>
</div>
<button data-action="moveUp"
class="btn btn-sm me-2"
data-bind-class="_first || _length === 1 ? 'btn-secondary disabled' : 'btn-primary'">
↑
</button>
<button data-action="moveDown"
class="btn btn-sm me-2"
data-bind-class="_last || _length === 1 ? 'btn-secondary disabled' : 'btn-primary'">
↓
</button>
<button data-action="removeItem" class="btn btn-sm btn-danger">
Remove
</button>
</li>
</template>
</ul>
<!-- Empty state -->
<div data-show="isEmpty" class="text-center py-4">
<div class="text-muted">
<h5>No items in the list</h5>
<p>Click "Add Item" to get started!</p>
</div>
</div>
</div>wildflower.component('simple-list', {
state: {
items: [
{ id: 1, name: 'First Item', created: '10:00:00' },
{ id: 2, name: 'Second Item', created: '10:01:00' },
{ id: 3, name: 'Third Item', created: '10:02:00' }
],
nextId: 4
},
computed: {
itemCount() {
return this.items.length
},
isEmpty() {
return this.items.length === 0
},
},
addItem() {
const newItem = {
id: this.nextId++,
name: `Dynamic Item ${this.nextId - 1}`,
created: new Date().toLocaleTimeString()
}
this.items.push(newItem)
console.log('Added item:', newItem)
},
addMultiple() {
const itemsToAdd = [
{ id: this.nextId++, name: `Batch Item A`, created: new Date().toLocaleTimeString() },
{ id: this.nextId++, name: `Batch Item B`, created: new Date().toLocaleTimeString() },
{ id: this.nextId++, name: `Batch Item C`, created: new Date().toLocaleTimeString() }
]
// Add all items at once
this.items.push(...itemsToAdd)
console.log('Added multiple items:', itemsToAdd)
},
removeItem(event, element, details) {
// Get the index from the framework's action context
const index = details.index
const removedItem = this.items[index]
this.items.splice(index, 1)
console.log('Removed item:', removedItem)
},
moveUp(event, element, details) {
if (details.first) return // Already at top
const { index, item } = details
this.items.splice(index, 1)
this.items.splice(index - 1, 0, item)
console.log('Moved item up:', item)
},
moveDown(event, element, details) {
if (details.last) return // Already at bottom
const { index, item } = details
this.items.splice(index, 1)
this.items.splice(index + 1, 0, item)
console.log('Moved item down:', item)
},
shuffle() {
// Fisher-Yates shuffle algorithm
const items = [...this.items]
for (let i = items.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
;[items[i], items[j]] = [items[j], items[i]]
}
this.items = items
console.log('Shuffled items')
},
clearAll() {
if (this.items.length > 0) {
const count = this.items.length
this.items = []
console.log(`Cleared ${count} items`)
}
}
})
Live Preview
Both ways of changing a list work.
Calling push or splice is the fast path, because the renderer sees one change and touches one row.
Assigning a new array, as the shuffle above does or as this.items = this.items.filter(...) does, hands the renderer the whole list to reconcile.
Primitive Lists
Lists of strings, numbers, or other primitives use $item to bind the item value directly:
<!-- List of strings -->
<ul data-list="tags">
<template>
<li data-bind="$item"></li>
</template>
</ul>wildflower.component('tag-list', {
state: {
tags: ['html', 'css', 'javascript']
}
})$item refers to the current item itself, rather than a property on the item. This works with any primitive type:
<!-- List of numbers -->
<ol data-list="scores">
<template>
<li>Score: <span data-bind="$item"></span></li>
</template>
</ol>
💡 Tip:
$item is the only way to bind primitive list items. For object arrays, use property names directly (e.g., data-bind="name").
Interactive Lists with State
List items can have their own state and interactive elements:
<div data-component="todo-manager">
<p class="text-muted">A fully interactive todo list with individual item state and bulk operations.</p>
<!-- Add new todo form -->
<form data-action="addTodo" class="mb-3">
<div class="d-flex gap-2">
<input type="text"
data-model="newTodo"
placeholder="Add a new todo..."
class="form-control"
required>
<button type="submit" class="btn btn-primary">
Add Todo
</button>
</div>
</form>
<!-- Bulk operations -->
<div class="mb-3">
<button data-action="markAllComplete" class="btn btn-sm btn-success me-2">
Mark All Complete
</button>
<button data-action="clearCompleted"
class="btn btn-sm btn-warning me-2"
data-bind-attr="{ disabled: noCompleted }">
Clear Completed (<span data-bind="completedCount"></span>)
</button>
<button data-action="clearAll"
class="btn btn-sm btn-danger"
data-bind-attr="{ disabled: isEmpty }">
Clear All
</button>
</div>
<!-- Statistics -->
<div class="mb-3">
<span class="me-3">
Total: <span class="text-primary fw-bold" data-bind="totalCount"></span>
</span>
<span class="me-3">
Complete: <span class="text-success fw-bold" data-bind="completedCount"></span>
</span>
<span class="me-3">
Remaining: <span class="text-warning fw-bold" data-bind="remainingCount"></span>
</span>
<span>
Progress: <span class="text-info fw-bold" data-bind="progressPercentage"></span>%
</span>
</div>
<!-- Todo list with interactive items -->
<div data-list="todos">
<template>
<div class="card mb-2" data-bind-class="cardClass">
<div class="card-body py-2">
<div class="d-flex align-items-center gap-2">
<input type="checkbox"
data-model="completed"
class="form-check-input flex-shrink-0">
<div class="flex-grow-1">
<span data-bind="text"
data-bind-class="completed ? 'text-decoration-line-through text-muted' : ''"></span>
<br>
<small class="text-muted">
<span class="badge badge-sm me-1" data-bind-class="priorityBadgeClass">
<span data-bind="priority"></span>
</span>
<span data-bind="created"></span>
</small>
</div>
<div class="d-flex align-items-center flex-shrink-0">
<button data-action="duplicateTodo"
class="btn btn-sm btn-info me-1">
Copy
</button>
<button data-action="deleteTodo"
class="btn btn-sm btn-danger">
Delete
</button>
</div>
</div>
</div>
</div>
</template>
</div>
<!-- Empty state -->
<div data-show="isEmpty" class="text-center py-4">
<div class="text-muted">
<h5>No todos yet</h5>
<p>Add a todo above to get started with your task management!</p>
</div>
</div>
</div>wildflower.component('todo-manager', {
state: {
todos: [
{
text: 'Learn WildflowerJS Lists',
completed: false,
priority: 'High',
created: '09:00',
id: 1
},
{
text: 'Build an interactive todo app',
completed: false,
priority: 'Medium',
created: '09:15',
id: 2
},
{
text: 'Write comprehensive documentation',
completed: true,
priority: 'Low',
created: '09:30',
id: 3
}
],
newTodo: '',
nextId: 4
},
computed: {
totalCount() {
return this.todos.length
},
completedCount() {
return this.todos.filter(todo => todo.completed).length
},
remainingCount() {
return this.todos.filter(todo => !todo.completed).length
},
progressPercentage() {
if (this.todos.length === 0) return 0
return Math.round((this.completedCount / this.todos.length) * 100)
},
isEmpty() {
return this.todos.length === 0
},
noCompleted() {
return this.completedCount === 0
},
// Item-level computed properties: each receives the row's item
cardClass(todo) {
return todo.completed ? 'bg-light border-success' : 'border-primary'
},
priorityBadgeClass(todo) {
const classes = {
'High': 'bg-danger',
'Medium': 'bg-warning text-dark',
'Low': 'bg-success'
}
return classes[todo.priority] || 'bg-secondary'
}
},
addTodo(event, element) {
// Prevent form submission
event.preventDefault()
const text = this.newTodo.trim()
if (text) {
const newTodo = {
text: text,
completed: false,
priority: 'Medium',
created: new Date().toLocaleTimeString().substring(0, 5),
id: this.nextId++
}
this.todos.push(newTodo)
this.newTodo = ''
console.log('Added todo:', newTodo)
}
},
deleteTodo(event, element, details) {
const index = details.index
const todo = this.todos[index]
if (confirm(`Delete "${todo.text}"?`)) {
this.todos.splice(index, 1)
console.log('Deleted todo:', todo)
}
},
duplicateTodo(event, element, details) {
const index = details.index
const originalTodo = this.todos[index]
const duplicatedTodo = {
text: `${originalTodo.text} (Copy)`,
completed: false,
priority: originalTodo.priority,
created: new Date().toLocaleTimeString().substring(0, 5),
id: this.nextId++
}
// Insert duplicate right after the original
this.todos.splice(index + 1, 0, duplicatedTodo)
console.log('Duplicated todo:', duplicatedTodo)
},
increasePriority(event, element, details) {
const index = details.index
const priorities = ['Low', 'Medium', 'High']
const currentIndex = priorities.indexOf(this.todos[index].priority)
if (currentIndex < priorities.length - 1) {
this.todos[index].priority = priorities[currentIndex + 1]
console.log('Increased priority for todo:', this.todos[index])
}
},
decreasePriority(event, element, details) {
const index = details.index
const priorities = ['Low', 'Medium', 'High']
const currentIndex = priorities.indexOf(this.todos[index].priority)
if (currentIndex > 0) {
this.todos[index].priority = priorities[currentIndex - 1]
console.log('Decreased priority for todo:', this.todos[index])
}
},
markAllComplete() {
const incompleteCount = this.remainingCount
this.todos.forEach(todo => {
todo.completed = true
})
console.log(`Marked ${incompleteCount} todos as complete`)
},
clearCompleted() {
const completedCount = this.completedCount
this.todos = this.todos.filter(todo => !todo.completed)
console.log(`Cleared ${completedCount} completed todos`)
},
clearAll() {
if (confirm('Clear all todos?')) {
const totalCount = this.todos.length
this.todos = []
console.log(`Cleared all ${totalCount} todos`)
}
}
})
Live Preview
Item-Level Computed Properties
Use item-level computed properties for per-item calculations that need access to external data (like stores) with automatic reactivity.
The signature declares the scope.
- Item-level:
name(item, index, info) { ... }runs per row in a list.itemis the current row,indexis its position,infois{ first, last, length }.thisis the component context, sothis.X,this.stores.X, andthis.props.Xall work. - Component-level:
name() { ... }runs once per component.thisis the component. Used for derived values that don't depend on a list row.
item parameter. A zero-arg computed referenced inside a list-template binding is treated as component-level: same value for every row. If your binding renders the same value for every row when you expected per-row variation, your computed is missing the item parameter.
wildflower.store('miniCart', {
state: { items: [] },
addItem(id) {
const existing = this.items.find(i => i.id === id);
if (existing) {
existing.qty++;
this.items = [...this.items];
} else {
this.items = [...this.items, { id, qty: 1 }];
}
}
});
wildflower.component('product-list', {
state: {
products: [
{ id: 1, name: 'Widget', price: 10 },
{ id: 2, name: 'Gadget', price: 20 }
]
},
computed: {
// Item-level: receives (item, index) - evaluated per list item
inCartQty(item) {
const cart = wildflower.getStore('miniCart');
return cart.items.find(i => i.id === item.id)?.qty || 0;
},
isInCart(item) {
return this.inCartQty(item) > 0; // Can call other item-level computeds
},
rowClass(item, index) {
return index % 2 === 0 ? 'even' : 'odd';
},
// Item-level computed returning a STYLE OBJECT for data-bind-style
itemStyle(item) {
return {
backgroundColor: item.featured ? '#fffde7' : '#ffffff',
borderColor: item.featured ? '#ffc107' : '#dee2e6'
};
}
},
addToCart(event, element, details) {
wildflower.getStore('miniCart').addItem(details.item.id);
}
});<div data-component="product-list">
<div data-list="products" data-key="id">
<template>
<!-- data-bind-style uses computed that returns style object -->
<div class="product" data-bind-class="rowClass" data-bind-style="itemStyle">
<span data-bind="name"></span>
<span class="badge" data-bind="inCartQty"></span>
<span data-show="isInCart">IN CART</span>
<button data-action="addToCart">Add to Cart</button>
</div>
</template>
</div>
</div>Benefits:
- When the cart store changes, only the affected item bindings update - not the entire list
- No need for pre-computed patterns that map over the entire array
- Works with every binding that takes an expression:
data-bind,data-show,data-render,data-bind-class,data-bind-style, anddata-bind-attr
Style Binding Note: When using
data-bind-style with computeds, the computed must return a style object like {backgroundColor: '#fff', color: 'red'}. The syntax data-bind-style="backgroundColor:colorProp" is NOT valid.
Reusing One Computed Across Scopes (Group + Row)
Sometimes the same per-row decoration applies to two different list scopes: e.g. a status icon that paints both the group-header row and each issue row inside the group. Make the parameterised computed shape-portable by reading a field that exists on both shapes:
computed: {
// Outer list emits group rows shaped { id, status, statusName, count, rows }.
// Inner list emits issue rows that also carry .status. Both shapes have
// .status, so the same parameterised computed serves both.
statusIcon(item) {
if (!item || item.status === undefined) return '';
return wildflower.getStore('pm').getStatus(item.status)?.icon || '○';
}
}Used as data-bind="statusIcon" inside both the group template and the row template. The framework passes whatever the current iteration's item is. No special form needed; just keep the field name consistent in your list-source design.
Item-Level Computeds in Compound Expressions
Bare references like data-bind-class="rowClass" are the simplest way to use an item-level computed, but you can also drop the same computed into any expression that an attribute accepts: object literals, ternaries, logical operators, string concatenation. The framework re-evaluates per row and tracks the same fine-grained dependencies.
Object syntax for class
<li data-bind-class="{ saved: isSaved }">Ternary in class
<li data-bind-class="isSaved ? 'saved' : ''">Object syntax for attr
<button data-bind-attr="({ 'aria-pressed': isSaved })">Compound show / render
<span data-show="isSaved && !isLocked">Ternary in text bind
<span data-bind="isSaved ? '✓ ' + name : name">Style object
<li data-bind-style="({ borderColor: badgeColor })">Each form reads isSaved(item) (or badgeColor(item)) once per row with that row's data. Mutating the state the computed reads, such as this.saved[item.id] = true, re-runs only the affected row's bindings.
Live: per-item computed driving five binding types
This product list uses a single item-level computed, isSaved(item), to drive a class binding, two data-show branches, an attribute binding, and the row-level pill text. Click the bookmark to save; the row's bindings flip without re-rendering anything else.
<div data-component="saveable-products">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted small">
<strong data-bind="savedCount">0</strong>
<span data-bind="savedLabel"> saved</span>
</span>
<button class="btn btn-sm btn-outline-secondary"
data-show="hasSaved"
data-action="clearSaved">Clear saved</button>
</div>
<ul class="list-group" data-list="products" data-key="id">
<template>
<li class="list-group-item d-flex justify-content-between align-items-center"
data-bind-class="{ 'list-group-item-success': isSaved }">
<!-- Ternary in text bind: prepend ✓ when saved -->
<span data-bind="isSaved ? '✓ ' + name : name"></span>
<span class="d-flex align-items-center gap-2">
<span class="text-muted small" data-bind="price"></span>
<!-- Compound data-show with item-level computed -->
<span class="badge bg-success" data-show="isSaved">Saved</span>
<!-- Object-syntax attr binding (aria-pressed) plus
compound show/!show on the same button text -->
<button class="btn btn-sm btn-outline-primary"
data-action="toggleSave"
data-bind-attr="({ 'aria-pressed': isSaved })"
data-bind="isSaved ? 'Remove' : 'Save'"></button>
</span>
</li>
</template>
</ul>
</div>wildflower.component('saveable-products', {
state: {
products: [
{ id: 'p1', name: 'Wireless headphones', price: '$89' },
{ id: 'p2', name: 'Mechanical keyboard', price: '$129' },
{ id: 'p3', name: 'USB-C hub', price: '$45' },
{ id: 'p4', name: 'Standing desk mat', price: '$72' },
{ id: 'p5', name: 'Webcam 1080p', price: '$58' }
],
// Sibling state keyed by item.id: the canonical lookup-map shape
// for item-level computeds.
saved: { p3: { savedAt: Date.now() } }
},
computed: {
// Zero-arg computeds resolve in component scope. Note the bare
// `this.saved`: no `this.state.` prefix needed; the context proxy
// routes it. Key iteration is tracked: Object.keys registers an
// iteration dependency, so adding or deleting a key in the lookup
// map wakes this computed. Updating an existing key's value does not.
savedCount() { return Object.keys(this.saved).length; },
hasSaved() { return this.savedCount > 0; },
savedLabel() {
const n = this.savedCount;
return n === 1 ? ' product saved' : ' products saved';
},
// Item-level computed: fn.length > 0, called once per row.
// Reads from state.saved keyed by item.id. When state.saved.
// changes (direct mutation), only the affected row re-evaluates.
isSaved(item) { return !!this.saved[item.id]; }
},
toggleSave(event, element, details) {
const item = details && details.item;
if (!item) return;
// Direct nested mutation triggers reactivity. No spread needed.
if (this.saved[item.id]) {
delete this.saved[item.id];
} else {
this.saved[item.id] = { savedAt: Date.now() };
}
},
clearSaved() {
this.saved = {};
}
});
Live Preview
One computed drives five binding types: class, attr, two text bindings, and two show branches, all from one source of truth.
Item-Level Computeds as Nested-List Sources
Item-level computeds also resolve as the source array of a nested data-list. Inside a parent list template, an inner data-list="someComputed" evaluates the computed against each parent row when the path isn't a raw field on the row. This means you don't have to pre-decorate parent rows with the inner array.
wildflower.component('thread', {
state: {
// Each comment carries raw `reactions` keyed by emoji.
comments: [
{ id: 'c1', body: 'Looks great!', reactions: { '👍': ['u-1', 'u-2'] } },
{ id: 'c2', body: 'Ship it.', reactions: {} }
],
currentUser: 'u-1'
},
computed: {
// Per-comment chip list. The computed receives the current comment
// as its argument; `this` stays the component, so component state
// like `this.currentUser` is still available alongside it.
reactionChips(comment) {
const me = this.currentUser
return ['👍','❤️','🚀'].map(emoji => {
const users = (comment.reactions && comment.reactions[emoji]) || []
return {
id: comment.id + ':' + emoji,
emoji,
chipClass: users.indexOf(me) !== -1 ? 'chip is-mine' : 'chip'
}
})
}
}
})<div data-list="comments" data-key="id">
<template>
<div class="comment">
<p data-bind="body"></p>
<!-- reactionChips is a computed; raw comments don't have it -->
<div class="reactions" data-list="reactionChips" data-key="id">
<template>
<button data-bind-class="chipClass" data-bind="emoji"></button>
</template>
</div>
</div>
</template>
</div>The framework reads item[path] first (fast path) and falls back to evaluating an item-level computed of the same name when the field is undefined. Same behaviour data-bind already had, now extended to nested-list source paths.
A nested list can also name a shared source instead of a field of the row.
data-list="$options.items" inside a row template renders the store's array in every row and follows the store, and a data-query="q" element inside a row does the same with the query's rows.
The row context still applies to bindings and actions inside that list, and removing the row disposes it.
Caveats. The fallback only fires when item[path] === undefined and path is a flat name (no dots). A raw field of the same name shadows the computed; if your row has a reactions field and you also want a derived view, name the computed differently (e.g., reactionChips) so the data-list can find it.
Nested Lists and Complex Data
Create nested list structures with complex data relationships:
<div data-component="project-manager">
<p class="text-muted">Nested lists demonstrating project-task relationships with real-time progress tracking.</p>
<!-- Project controls -->
<div class="mb-3">
<button data-action="addProject" class="btn btn-primary me-2">
Add Project
</button>
<button data-action="addSampleData" class="btn btn-secondary me-2">
Add Sample Data
</button>
<button data-action="clearAll" class="btn btn-danger">
Clear All
</button>
</div>
<!-- Overall statistics -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card bg-primary text-white">
<div class="card-body text-center">
<h5 class="card-title"><span data-bind="totalProjects"></span></h5>
<p class="card-text">Total Projects</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-success text-white">
<div class="card-body text-center">
<h5 class="card-title"><span data-bind="totalTasks"></span></h5>
<p class="card-text">Total Tasks</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-warning text-white">
<div class="card-body text-center">
<h5 class="card-title"><span data-bind="completedTasks"></span></h5>
<p class="card-text">Completed Tasks</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-info text-white">
<div class="card-body text-center">
<h5 class="card-title"><span data-bind="overallProgress"></span>%</h5>
<p class="card-text">Overall Progress</p>
</div>
</div>
</div>
</div>
<!-- Projects list with nested tasks -->
<div data-list="projects">
<template>
<div class="card mb-3">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<h5 class="mb-0 me-3">
<span data-bind="name"></span>
<span class="badge bg-secondary ms-2">#<span data-bind="id"></span></span>
</h5>
<div class="me-3">
<div class="progress" style="width: 120px; height: 12px;">
<div class="progress-bar"
data-bind-style="progressBarStyle">
</div>
</div>
<small class="text-muted"><span data-bind="progressPercentage"></span>% complete</small>
</div>
</div>
<div class="d-flex align-items-center">
<button data-action="addTask" class="btn btn-sm btn-primary me-2">
Add Task
</button>
<button data-action="toggleCollapse" class="btn btn-sm btn-secondary me-2">
<span data-bind="collapsed ? 'Expand' : 'Collapse'"></span>
</button>
<button data-action="deleteProject" class="btn btn-sm btn-danger">
Delete
</button>
</div>
</div>
</div>
<div class="card-body" data-bind-class="collapsed ? 'd-none' : ''">
<div class="row mb-3">
<div class="col-md-8">
<p class="text-muted mb-0"><span data-bind="description"></span></p>
</div>
<div class="col-md-4">
<small class="text-muted">
Created: <span data-bind="created"></span> |
Tasks: <span data-bind="taskCount"></span>
</small>
</div>
</div>
<!-- Task input form -->
<form data-action="addTaskForm" class="mb-3">
<div class="d-flex gap-2">
<input type="text"
data-model="newTaskName"
placeholder="New task name..."
class="form-control flex-grow-1"
required>
<select data-model="newTaskPriority" class="form-select" style="max-width: 120px;">
<option value="Low">Low</option>
<option value="Medium" selected>Medium</option>
<option value="High">High</option>
</select>
<button type="submit" class="btn btn-primary text-nowrap">Add Task</button>
</div>
</form>
<!-- Nested tasks list -->
<div data-list="tasks">
<template>
<div class="card mb-2 border-start border-3" data-bind-class="taskBorderClass">
<div class="card-body py-2">
<div class="d-flex align-items-center">
<input type="checkbox"
data-model="completed"
class="form-check-input me-3">
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-start">
<div>
<strong data-bind="name" data-bind-class="completed ? 'text-decoration-line-through text-muted' : ''"></strong>
<span class="badge badge-sm ms-2" data-bind-class="priorityBadgeClass">
<span data-bind="priority"></span>
</span>
</div>
<div class="d-flex align-items-center">
<button data-action="moveTaskUp"
class="btn btn-sm me-2"
data-bind-class="_first || _length === 1 ? 'btn-secondary disabled' : 'btn-primary'">
↑
</button>
<button data-action="moveTaskDown"
class="btn btn-sm me-2"
data-bind-class="_last || _length === 1 ? 'btn-secondary disabled' : 'btn-primary'">
↓
</button>
<button data-action="deleteTask"
class="btn btn-sm btn-danger">
Delete
</button>
</div>
</div>
<small class="text-muted">
Task #<span data-bind="id"></span> |
Created: <span data-bind="created"></span>
</small>
</div>
</div>
</div>
</div>
</template>
</div>
<!-- Empty tasks state -->
<div data-show="hasNoTasks" class="text-center py-3">
<p class="text-muted mb-0">No tasks yet. Add a task above to get started!</p>
</div>
</div>
</div>
</template>
</div>
<!-- Empty projects state -->
<div data-show="hasNoProjects" class="text-center py-4">
<div class="text-muted">
<h5>No projects yet</h5>
<p>Create your first project to start managing tasks!</p>
</div>
</div>
</div>wildflower.component('project-manager', {
state: {
projects: [
{
id: 1,
name: 'WildflowerJS Documentation',
description: 'Create comprehensive documentation for the framework',
created: '09:00',
collapsed: false,
newTaskName: '',
newTaskPriority: 'Medium',
tasks: [
{
id: 1,
name: 'Setup documentation structure',
priority: 'High',
completed: true,
created: '09:15'
},
{
id: 2,
name: 'Write list examples',
priority: 'Medium',
completed: false,
created: '09:30'
}
]
},
{
id: 2,
name: 'Framework Testing',
description: 'Comprehensive testing suite for all framework features',
created: '10:00',
collapsed: false,
newTaskName: '',
newTaskPriority: 'Medium',
tasks: [
{
id: 3,
name: 'Unit tests for list rendering',
priority: 'High',
completed: false,
created: '10:15'
},
{
id: 4,
name: 'Integration tests',
priority: 'Medium',
completed: false,
created: '10:30'
},
{
id: 5,
name: 'Performance benchmarks',
priority: 'Low',
completed: true,
created: '10:45'
}
]
}
],
nextProjectId: 3,
nextTaskId: 6
},
computed: {
// Global statistics
totalProjects() {
return this.projects.length
},
totalTasks() {
return this.projects.reduce((total, project) => {
return total + project.tasks.length
}, 0)
},
completedTasks() {
return this.projects.reduce((total, project) => {
return total + project.tasks.filter(task => task.completed).length
}, 0)
},
overallProgress() {
const total = this.totalTasks
if (total === 0) return 0
return Math.round((this.completedTasks / total) * 100)
},
hasNoProjects() {
return this.projects.length === 0
},
// Project-level computed properties: each receives the project row's item
taskCount(project) {
return project.tasks ? project.tasks.length : 0
},
progressPercentage(project) {
const tasks = project.tasks || []
if (tasks.length === 0) return 0
const completed = tasks.filter(task => task.completed).length
return Math.round((completed / tasks.length) * 100)
},
progressBarStyle(project) {
const tasks = project.tasks || []
let progress = 0
if (tasks.length > 0) {
const completed = tasks.filter(task => task.completed).length
progress = Math.round((completed / tasks.length) * 100)
}
let bgColor = '#dc3545' // danger/red
if (progress === 100) bgColor = '#198754' // success/green
else if (progress >= 75) bgColor = '#0dcaf0' // info/cyan
else if (progress >= 50) bgColor = '#ffc107' // warning/yellow
return {
width: progress + '%',
height: '100%',
backgroundColor: bgColor,
transition: 'width 0.3s ease'
}
},
hasNoTasks(project) {
const tasks = project.tasks || []
return tasks.length === 0
},
// Task-level computed properties: in the nested list, the item is the task
priorityBadgeClass(task) {
const classes = {
'High': 'bg-danger',
'Medium': 'bg-warning text-dark',
'Low': 'bg-success'
}
return classes[task.priority] || 'bg-secondary'
},
taskBorderClass(task) {
const classes = {
'High': 'border-danger',
'Medium': 'border-warning',
'Low': 'border-success'
}
return classes[task.priority] || 'border-secondary'
}
},
addProject() {
const newProject = {
id: this.nextProjectId++,
name: `Project ${this.nextProjectId - 1}`,
description: `Description for project ${this.nextProjectId - 1}`,
created: new Date().toLocaleTimeString().substring(0, 5),
collapsed: false,
newTaskName: '',
newTaskPriority: 'Medium',
tasks: []
}
this.projects.push(newProject)
console.log('Added project:', newProject)
},
addSampleData() {
const sampleProjects = [
{
id: this.nextProjectId++,
name: 'Mobile App Development',
description: 'Build responsive mobile application',
created: new Date().toLocaleTimeString().substring(0, 5),
collapsed: false,
newTaskName: '',
newTaskPriority: 'Medium',
tasks: [
{
id: this.nextTaskId++,
name: 'Design user interface',
priority: 'High',
completed: false,
created: new Date().toLocaleTimeString().substring(0, 5)
},
{
id: this.nextTaskId++,
name: 'Implement authentication',
priority: 'High',
completed: false,
created: new Date().toLocaleTimeString().substring(0, 5)
},
{
id: this.nextTaskId++,
name: 'Add push notifications',
priority: 'Medium',
completed: false,
created: new Date().toLocaleTimeString().substring(0, 5)
}
]
},
{
id: this.nextProjectId++,
name: 'Database Migration',
description: 'Migrate legacy database to new schema',
created: new Date().toLocaleTimeString().substring(0, 5),
collapsed: false,
newTaskName: '',
newTaskPriority: 'Medium',
tasks: [
{
id: this.nextTaskId++,
name: 'Backup existing data',
priority: 'High',
completed: true,
created: new Date().toLocaleTimeString().substring(0, 5)
},
{
id: this.nextTaskId++,
name: 'Create migration scripts',
priority: 'High',
completed: false,
created: new Date().toLocaleTimeString().substring(0, 5)
}
]
}
]
this.projects.push(...sampleProjects)
console.log('Added sample projects:', sampleProjects)
},
deleteProject(event, element, details) {
const projectIndex = details.index
const project = this.projects[projectIndex]
if (confirm(`Delete project "${project.name}" and all its tasks?`)) {
this.projects.splice(projectIndex, 1)
console.log('Deleted project:', project)
}
},
toggleCollapse(event, element, details) {
const projectIndex = details.index
const project = this.projects[projectIndex]
// Create new projects array with immutable update
const updatedProjects = [...this.projects]
updatedProjects[projectIndex] = {
...updatedProjects[projectIndex],
collapsed: !project.collapsed
}
this.projects = updatedProjects
console.log('Toggled collapse for project:', project.name)
},
addTask(event, element, details) {
const projectIndex = details.index
const newTask = {
id: this.nextTaskId++,
name: `Task ${this.nextTaskId - 1}`,
priority: 'Medium',
completed: false,
created: new Date().toLocaleTimeString().substring(0, 5)
}
// Create new projects array with immutable update
const updatedProjects = [...this.projects]
updatedProjects[projectIndex] = {
...updatedProjects[projectIndex],
tasks: [...updatedProjects[projectIndex].tasks, newTask]
}
this.projects = updatedProjects
console.log('Added task:', newTask)
},
addTaskForm(event, element, details) {
event.preventDefault()
const projectIndex = details.index
const project = this.projects[projectIndex]
const taskName = project.newTaskName?.trim() || '';
if (taskName) {
const newTask = {
id: this.nextTaskId++,
name: taskName,
priority: project.newTaskPriority,
completed: false,
created: new Date().toLocaleTimeString().substring(0, 5)
}
// Direct nested update: WF's deep reactive proxy handles this
const targetProject = this.projects[projectIndex];
targetProject.tasks = [...targetProject.tasks, newTask];
targetProject.newTaskName = '';
targetProject.newTaskPriority = 'Medium';
console.log('Added task via form:', newTask)
}
},
deleteTask(event, element, details) {
// Get indices from the framework's action context
const taskIndex = details.index
const projectIndex = details.parent.index
const project = this.projects[projectIndex]
const task = project.tasks[taskIndex]
if (confirm(`Delete task "${task.name}"?`)) {
// Create new projects array with immutable update
const updatedProjects = [...this.projects]
updatedProjects[projectIndex] = {
...updatedProjects[projectIndex],
tasks: updatedProjects[projectIndex].tasks.filter((_, index) => index !== taskIndex)
}
this.projects = updatedProjects
console.log('Deleted task:', task)
}
},
moveTaskUp(event, element, details) {
// Get indices from the framework's action context
const taskIndex = details.index
const projectIndex = details.parent.index
const project = this.projects[projectIndex]
if (taskIndex > 0) {
const task = project.tasks[taskIndex]
// Create new projects array with immutable update
const updatedProjects = [...this.projects]
const newTasks = [...project.tasks]
// Swap positions immutably
newTasks[taskIndex] = newTasks[taskIndex - 1]
newTasks[taskIndex - 1] = task
updatedProjects[projectIndex] = {
...updatedProjects[projectIndex],
tasks: newTasks
}
this.projects = updatedProjects
console.log('Moved task up:', task)
}
},
moveTaskDown(event, element, details) {
// Get indices from the framework's action context
const taskIndex = details.index
const projectIndex = details.parent.index
const project = this.projects[projectIndex]
if (taskIndex < project.tasks.length - 1) {
const task = project.tasks[taskIndex]
// Create new projects array with immutable update
const updatedProjects = [...this.projects]
const newTasks = [...project.tasks]
// Swap positions immutably
newTasks[taskIndex] = newTasks[taskIndex + 1]
newTasks[taskIndex + 1] = task
updatedProjects[projectIndex] = {
...updatedProjects[projectIndex],
tasks: newTasks
}
this.projects = updatedProjects
console.log('Moved task down:', task)
}
},
clearAll() {
if (confirm('Clear all projects and tasks?')) {
const projectCount = this.projects.length
const taskCount = this.totalTasks
this.projects = []
console.log(`Cleared ${projectCount} projects and ${taskCount} tasks`)
}
}
})
Live Preview
Components in Lists
When a component is rendered inside a data-list template, it can access the list item's data via this.listItem:
Template Setup
<div data-list="tasks" data-key="id">
<template>
<div data-component="task-card">...</div>
</template>
</div>Component Definition
wildflower.component('task-card', {
state: {
taskId: null
},
beforeInit() {
// this.listItem contains the task object for this list item
if (this.listItem) {
this.taskId = this.listItem.id;
console.log('Task title:', this.listItem.title);
}
}
});
Key Points:
this.listItemis available inbeforeInit(),init(), and all lifecycle methods- It returns
nullfor components not rendered inside a list - It provides a live reference to the data object - changes to the source data are reflected
- For nested lists, it returns the immediate parent list's item, not an ancestor's
Do not use
data-cloak inside list templates. Content inside <template> is inert and invisible until the framework renders it, so there is no flash-of-unstyled-content risk. Using data-cloak inside templates causes data-show toggling to silently fail on dynamically added list items. Use data-cloak only on top-level elements (modals, portals) outside of list templates.
Defensive Pattern
Components that may be used both inside and outside of lists can check for listItem:
beforeInit() {
// Works whether component is in a list or standalone
const data = this.listItem || this.element.dataset;
this.itemId = data.id || data.itemId;
}Component Boundary Behavior
If a component is nested inside another component within a list, the inner component does not inherit the list item data:
<div data-list="items">
<template>
<div data-component="outer-comp">
<!-- outer-comp.listItem = item data -->
<div data-component="inner-comp">
<!-- inner-comp.listItem = null (blocked by component boundary) -->
</div>
</div>
</template>
</div>This ensures components maintain clear ownership boundaries. If the inner component needs the data, the outer component should explicitly pass it via props or state.
📚 Continue Learning: For advanced list patterns including filtering, sorting, external data sources, and performance optimization, see Advanced Lists. For rendering different templates per item based on a data property (heterogeneous lists), see Dynamic Templates.
Mini
Todo List
Reactive lists with input binding, filtering, item actions, and computed counts.