Learning the {#each} looping in svelte

How to do template looping

---

What is svelte?

Svelte is an SPA framework like react or vue. I like it since it is pleasant and less messy and also has a remarkable packaging framework.

We have seen many articles on svelte including a simple analog clock and some charts, bar graph, area graph and scatter chart.

How to setup the project?

npx degit sveltejs/template moz-todo-svelte
cd moz-todo-svelte
npm install
npm run dev

Code sample and demo

main.js

import EachTutorial from './EachTutorial.svelte';

const app = new EachTutorial({
	target: document.body,
});

export default app;

Thing.svelte

<script>
	export let current;
	const initial = current;
</script>

<p>
	<span style="background-color: {initial}">initial</span>
	<span style="background-color: {current}">current</span>
</p>

<style>
	span {
		display: inline-block;
		padding: 0.2em 0.5em;
		margin: 0 0.2em 0.2em 0;
		width: 4em;
		text-align: center;
		border-radius: 0.2em;
		color: white;
	}
</style>

EachTutorial.svelte

<script>
	import Thing from './Thing.svelte';
	let fruits = [
		{  name: 'Apple' },
		{  name: 'Orange' },
		{  name: 'Grapes' },
		{  name: 'Pineapple' },
		{  name: 'Rose apple' },
		{  name: 'Passion fruit' }
	];
	let cats = [
		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
		{ id: 'z_AbfPXTKms', name: 'Maru' },
		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
	];

	let things = [
		{ id: 1, color: 'darkblue' },
		{ id: 2, color: '#ccc' },
		{ id: 3, color: 'deeppink' },
		{ id: 4, color: 'salmon' },
		{ id: 5, color: 'gold' },
		{ id: 6, color: 'red' },
		{ id: 7, color: 'green' },
		{ id: 8, color: 'orange' },
		{ id: 9, color: 'gray' },
		{ id: 10, color: 'goldenred' }
	];

	function removeFirst() {
		things = things.slice(1);
	}

	function removeLast() {
		things.pop();
		things = things;
	}


</script>

<h2>The fruits</h2>

<ul>
	{#each fruits as { name }, i}
		<li>
			{i}: {name}
		</li>
	{/each}
</ul>


<h2>The Famous Cats of YouTube</h2>

<ul>
	{#each cats as { id, name }, i}
		<li>
			<a target="_blank" rel="noreferrer"
href="

{i + 1}: {name}
			</a>
		</li>
	{/each}
</ul>

<button on:click={removeFirst}> Remove first thing </button>
<button on:click={removeLast}> Remove last thing </button>

<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap:
1em">
	<div>
		<h2>Keyed</h2>
		{#each things as thing (thing.id)}
			{thing.id}
			<Thing current={thing.color} />
		{/each}
	</div>

	<div>
		<h2>Unkeyed</h2>
		{#each things as thing}
			<Thing current={thing.color} />
		{/each}
	</div>
</div>

Conclusion

Svelte has been very pleasant to work with due to its ease for writing reactive code. However today I had to assign a variable to itselt to trigger a reload. This is the code in the removeLast() function. The pop() function changes the Things object but svelte needs to be informed of it with an assignment.

Answer

What is a time slice?

A time slice is any block of time in a time sharing system in which a resource is being used like a CPU or a voice call in a TDMA call in old PSTN networks.

Question

How does CDMA work?

Feedback

We are exploring the world of svelte programming but SaaS typically requires a lot of experience and dedication.

Making money means that you solve a problem reasonably well for users since crappy code does not get paid.

---