Gjenbruk og testing
Fordi vi ikke har gitt antallLoek noen verdi, får denne variabelen standardverdien 0 når vi binder den. Du kan prøve å endre standardverdien til 1 i Teller.svelte. Da skal du få opp en melding om at du har 9 varer i handlelisten i stedet for 8, og verdien for løk vil være 1. Når en egenskap verken har en standardverdi eller får en verdi i komponentens tagg, får den verdien undefined. Hvis vi bare skriver <Teller /> og glemmer å sende inn en verdi for navnet, ser det altså slik ut:
LAGRE VARENE I ET ARRAY OG VISE DEM MED EN EACH-LØKKE I kapittel 1 lærte du å iterere over et array med en each-blokk. I handlelisten vi holder på å utvikle, er det en fordel at varene er lagret i et array. Da kan brukeren legge til så mange varer hun vil, og ikke et forhåndsbestemt antall. Vi venter litt med å legge til muligheten for å legge til flere varer og begynner med å flytte det vi allerede har, over i et array. 1 <!-- handleliste.svelte --> 2 <script> 3
import Teller from "./_komponenter/Teller.svelte"
4 5
let varer = [
6 { navn: "Løk", antall: 0 }, 7 { navn: "Epler", antall: 5 }, 8 { navn: "Melk", antall: 3 }, 9
]
10 11
const summerAntall = (varer) => {
12 let sum = 0 13 for (let vare of varer) { 14 sum = sum + vare.antall 15 } 16 return sum 17 } 18 19
$: totaltAntall = summerAntall(varer)
20 </script> 21 22 <h1>Handleliste</h1> 23 <ul> 24
{#each varer as vare}
25 <li><Teller navn={vare.navn} bind:verdi={vare.antall} /></li> 26 {/each} 27 </ul> 28 29 <p>Du har {totaltAntall} varer i handlelisten.</p>
Det første vi gjorde, var å legge varene til som objekter i arrayet varer. Siden arrayet kan inneholde mange verdier, er vi nødt til å bruke en løkke for å regne ut summen. Derfor har vi laget funksjonen summerAntall, som tar inn antall varer som input og bruker en løkke til å summere alle varene. Linjen $: totaltAntall = summerAntall(varer) gjør at verdien til variabelen totaltAntall regnes ut på nytt hver gang brukeren endrer verdien til varer
23
