More data and simple input

In the previous page, Sercrod only replaced one placeholder from *let. In this step you will:

• move data into the data attribute,
• bind an input with *input,
• and try a tiny counter using @click.

Multiple fields in data

Sercrod can read more than one field from data. For example:

<serc-rod data='{"agent":"fox","target":"dog"}'>
	<p>The quick brown %agent% jumps over the lazy %target%.</p>
</serc-rod>

Both %agent% and %target% come from the same data object. You can add more fields in the same way.

Example: live greeting

Now combine data with *input so that the heading follows what you type.

Code

<serc-rod data='{"name":"World"}'>
	<h2>Hello, %name%!</h2>
	<input *input="name" placeholder="Type your name...">
</serc-rod>

Sample

When you reload the file you should first see Hello, World!. As you type into the input field, the value of name changes and the heading updates.

A minimal counter

Finally, here is a small example that combines a data field, an event handler, and *print.

Code

<serc-rod data='{"count":0}'>
	<button @click="count++">+1</button>
	<p *print="count"></p>
</serc-rod>

Sample

Each click increments count, so the number in the paragraph increases: 0, 1, 2, and so on.

Next: Conditions and loops

Once you are comfortable with data, *input, and simple events, you can move on to conditional rendering and loops.

Next: Conditions and loops