Comment-style stack view

This example collects short messages into a stack-style list. The form fields are bound with *input, and a button with @click pushes a new entry into the list.

Code

<serc-rod data='{"name":"","text":"","messages":[]}'>
	<section>
		<h2>Add a message</h2>
		<p>
			<label>
				Name:
				<input type="text" *input="name" placeholder="Your name">
			</label>
		</p>
		<p>
			<label>
				Message:
				<input type="text" *input="text" placeholder="Say something...">
			</label>
		</p>
		<p>
			<button type="button" @click="
				(function(){
					var n = (name || '').trim();
					var t = (text || '').trim();
					if(!n || !t) return;
					messages.unshift({ name: n, text: t });
					text = '';
				})()
			">Post</button>
		</p>
	</section>

	<section>
		<h2>Messages</h2>
		<p *if="!messages.length">No messages yet.</p>
		<ul>
			<li *for="m of messages">
				<p><strong>%m.name%</strong><span> : </span><span>%m.text%</span></p>
			</li>
		</ul>
	</section>
</serc-rod>

Sample