09 - Save and load

The Todo app can now add and toggle items. Finish the main track by adding Save and Load buttons. Sercrod's *save and *load directives handle the file-style round trip.

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>
	<button type="button" *save>
		Save
	</button>
	<button type="button" *load>
		Load
	</button>
</serc-rod>

How to read save and load

• *save serializes the host data and downloads it as a JSON file.
• *load opens a file picker and loads JSON back into the host data.
• Because the host data contains todos, loading updates the visible loop.
• The buttons stay simple. Sercrod owns the file save and load behavior.

Result

Next

This completes the main Todo track.

Previous: Toggle items

Back to Tutorial index