05 - Conditions

Use two sample Todos. Conditions show [x] for a done Todo and [ ] for an open Todo.

Code

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

<serc-rod data='{"draft":"Buy milk","todos":[{"title":"Buy milk","done":false},{"title":"Pay bills","done":true}]}'>
	<h2>Todo</h2>
	<p>
		<span *if="todos[0].done">[x]</span>
		<span *else>[ ]</span>
		<span>%todos[0].title%</span>
		<button type="button" @click="todos[0].done = !todos[0].done">
			Toggle
		</button>
	</p>
	<p>
		<span *if="todos[1].done">[x]</span>
		<span *else>[ ]</span>
		<span>%todos[1].title%</span>
		<button type="button" @click="todos[1].done = !todos[1].done">
			Toggle
		</button>
	</p>
</serc-rod>

How to read the conditions

• *if="todos[0].done" and *if="todos[1].done" check each Todo state.
• *else shows [ ] when that Todo is not done.
• Each Toggle button changes the done value for that Todo.
• The repeated Todo markup will be replaced by *for in the next chapter.

Result

Next

The next step will render every Todo in the array as a visible list.

Previous: Forms

Next: Loops

Back to Tutorial index