Tag-based filtering

This example filters a small list of items by tags. You can click tags to toggle them on or off, and the list only shows items that match at least one selected tag.

Code

<serc-rod data='{
	"tags": ["guide","reference","playground","advanced"],
	"selected": [],
	"items": [
		{"title":"Getting started","tags":["guide"]},
		{"title":"Directives overview","tags":["reference"]},
		{"title":"Playground samples","tags":["playground"]},
		{"title":"Integration notes","tags":["reference","advanced"]},
		{"title":"SSG / SSR setup","tags":["advanced"]}
	]
}'>
	<section>
		<h2>Tags</h2>
		<div>
			<button type="button"
				*for="tag of tags"
				@click="
					(function(){
						var i = selected.indexOf(tag);
						if(i === -1){ selected.push(tag); }
						else{ selected.splice(i, 1); }
					})()
				"
				*class="{
					'tag-on'  : selected.indexOf(tag) !== -1,
					'tag-off' : selected.indexOf(tag) === -1
				}"
			>
				%tag%
			</button>
		</div>
	</section>

	<section>
		<h2>Items</h2>
		<p *if="!selected.length">
			No tag selected. Showing all items.
		</p>
		<ul *each="item of items">
			<li 
				*if="
					!selected.length ||
					item.tags.some(function(t){
						return selected.indexOf(t) !== -1;
					})
				"
			>
				<strong>%item.title%</strong>
				<span>
					(
					<span *for="i, t of item.tags">
						%t%<span *if="i < item.tags.length - 1">, </span>
					</span>
					)
				</span>
			</li>
		</ul>
	</section>
</serc-rod>

Sample