02 - Data and output

Now give draft a value and print it on the page. This shows that data and output are separate: data holds the value, and interpolation displays it.

Code

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

<serc-rod data='{"draft":"Buy milk","todos":[]}'>
	<h2>Todo</h2>
	<p>Draft: %draft%</p>
</serc-rod>

How to read it

• draft is stored in the host data.
• %draft% displays the current draft value.
• todos is still empty; no list is rendered yet.

Result

Next

The next step will add a button that moves draft into todos.

Previous: First page

Next: Events

Back to Tutorial index