08 - Toggle items

The Todo app can now add new items. Add a Toggle button to each repeated row so every Todo can switch between open and done.

Code

<script src="/sercrod.js"></script>

<serc-rod data='{"draft":"","todos":[{"title":"Buy milk","done":false},{"title":"Pay bills","done":true}]}'>
	<h2>Todo</h2>
	<p *if="todos.length === 0">No todos yet.</p>
	<ul *else>
		<li *for="todo of todos">
			<span *if="todo.done">[x]</span>
			<span *else>[ ]</span>
			<span>%todo.title%</span>
			<button type="button" @click="todo.done = !todo.done">
				Toggle
			</button>
		</li>
	</ul>
	<p>
		<label>
			Title:
			<input type="text" *input="draft" *lazy>
		</label>
	</p>
	<p *if="draft">Draft: %draft%</p>
	<p *else>Type a Todo title.</p>
	<button type="button" @click="if(draft.trim()){ todos.push({ title: draft, done: false }); draft = '' }">
		Add
	</button>
</serc-rod>

How to read toggle

• The Toggle button is inside the repeated <li>.
• todo.done = !todo.done changes the current row's Todo.
• The button changes todo, not a fixed index like todos[0].
• The same *if and *else markers show the updated state.

Result

Next

The next step will save and load the Todo list in this browser.

Previous: Add items

Next: Save and load

Back to Tutorial index