JavaScriptbibliotek. Introduksjon MVVC. Informasjonsteknologi 2. Gløer Olav Langslet Sandvika VGS

Transkript

1 MVVC JavaScriptbibliotek Gløer Olav Langslet Sandvika VGS Knockout.js Informasjonsteknologi 2 Introduksjon I dag skal vi se nærmere på et JavaScriptbibliotek som heter Knockout. Knockout og andre biblioteker, som Backbone og Ember kan hjelpe oss med å løsrive koden fra dokument-objektmodellen. Vanligvis skriver vi mye document.getelementbyid for å få tak i elementer, og jobber mye med å oppdatere verdier i lister og lignende. Med knockout.js holder vi styr på verdiene i en datamodell, og kan bruke dem der de trengs. Vi kan enkelt sørge for at verdiene oppdaterer seg med såkalt data-binding, som er en 2-veis metode for å knytte gui-elementer til datamodellen.

2 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Vi forsøker å lage et bilregister Vi skal i denne leksjonen lage et lite bilregister. Det første vi må gjøre, er å laste ned knockout-biblioteket. Det finner dere på knockoutjs.com Legg inn skriptet Sett inn en referanse til knockout-filen i head-elementet på siden din: Vanligvis legger vi vårt eget skript i en egen fil, men for enkle eksempler, går det også utmerket å skrive koden i html-dokumentet. 2

3 Bilregister med knockout.js Informasjonsteknologi 2 Et bil-objekt Kodingen med knockout skiller seg ikke i noen særlig grad fra vanlig JavaScript-programmering. Hvis vi skal lage et register for biler, kan det være lurt å ha et objekt for en bil, en liten klump med kode som kan lagre den informasjonen vi trenger om en bil. Vi starter med å lage et helt enkelt JavaScript-objekt: Vi kan legge koden i body-elementet for dette eksempelet. Det knockout kan hjelpe oss med, er å vise frem verdiene fra bil-objektet i HTML-koden vår. Men vi må da først si at attributtene i objektet skal være såkalte observables. Det vil si at de kan vises frem ved å referere til dem, og det vil også si at de kan oppdateres fra det grafiske brukergrensesnittet (GUI). Vi setter alle attributtene til å være observables: Vi må også huske på å si at bil-objektet vårt skal kunne bruke bindings, det er det som skaper en sammenheng mellom verdiene, og de grensesnittet, og som gjør at vi kan få tak i verdiene for bilens attributter. Vi har nå laget en datamodell for programmet vårt. La oss forsøke å sette opp en tabell som viser frem informasjon om bilen. 3

4 sdsd Bilregister med knockout.js Informasjonsteknologi 2 data-bind Mye av vitsen med knockout er at vi slipper å skrive så mye kode for å holde grensesnittet og datamodellen oppdatert. Med data-bindings kan vi knytte verdiene i datamodellen (bilen) og grensesnittet sammen. I HTML-koden rett over script-taggen skriver vi: Det er nå magien viser seg. Vi kan hente ut verdier fra bil-objektet vårt ved å skrive data-bind = text:merke inni en html-tagg. Dette kan vi for så vidt gjøre alle de stedene vi vil vise frem denne verdien. Siden vi skal lage et bilregister, legger vi allerede nå inn resultatet i en tabell. Så blir det lett å utvide når vi skal lage flere biler. Når vi jobber med objekter, kan vi også knytte beregnede verdier til objektet. For eksempel kunne vi være interessert i å få vite prisen på bilen med og uten moms. La oss knytte en liten funksjon til bilen, som viser den beregnede prisen med moms. 4

5 Bilregister med knockout.js Informasjonsteknologi 2 Beregning av moms Vi lager en liten funksjon som regner ut pris med moms (linje 36-38): Vi knytter en funksjon til bilen. Legg merke til at funksjonen er pakket inn i en ko.computed. Når vi gjør beregninger på andre verdier i modellen, sørger ko.computed for at også denne verdien oppdaterer seg hver gang noen av de underliggende data i modellen oppdaterer seg. I dette tilfellet vil det si at når prisen oppdateres i modellen, så vil også prismedmoms oppdatere seg. Vi legger inn en ekstra celle i tabellen (linje 14 og 22): 5

6 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Endring av verdier Til nå har vi kun hentet verdier ut av modellen. Styrken til knockout viser seg først når vi ser hvor enkelt det er å endre verdier i modellen vår. Vi legger inn 3 input-felter over tabellen. Også her skal vi hente ut verdier fra modellen, men vi skal også sørge for at modellen oppdaterer seg når vi endrer verdiene i input-feltene. Forskjellen nå, er at vi henter ut verdiene med data-bind= value:merke i stedet for data-bind= text:merke. Når vi bruker value, vil endringer føre til at modellen oppdaterer seg når input-feltet oppdaterer seg. Med text kan vi kun hente ut verdien. Nå kan vi skrive inn Chevrolet, og vips ser vi at innholdet i tabellen endrer seg i det vi trykker på Enter-tasten. Men det skal være et bilregister. Vi er da nødt til å ta høyde for at det skal kunne være mer enn bare én bil i registeret vårt. Grovt sett kan vi si at variabelen bil, som vi har laget er et objekt, men vi trenger det vi i for eksempel Java kaller en klass, eller class. Det er en modell for hvordan alle biler (objekter av klassen) skal se ut, dvs. hvilke attributter og egenskaper de skal ha. I JavaScript bruker vi i kke klasse-begrepet på samme måte, men prinsippene er de samme. 6

7 Bilregister med knockout.js Informasjonsteknologi 2 Vi skriver om objektet til en klasse Klasser i JavaScript kan beskrives med en spesiell type funksjoner.i funksjonen beskriver vi hvordan objektene (de konkrete bilene) skal se ut: I Java skriver vi navnet til klassene med stor forbokstav. Det er god skikk å overføre denne praksisen til JavaScript, slik at funksjonen Bil har stor forbokstav. Den konkrete bilen, altså varabelen, eller objektet, bør ha liten forbokstav. Vi må også sørge for at attributtene er såkalte ko.observables: Nå kan vi for så vidt lage flere biler, men for at systemet vårt skal virke, må vi sette inn prismedmoms. Dette kan vi legge inn som en funksjon inne i Bil-klassen: 7

8 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Setter inn en funksjon for å beregne moms Momsen skal oppdateres i HTML-koden når prisen endres. Vi bør derfor bruke en ko.computed: ko.computed kan ta 2 parametre, det ene er funksjonen som returnerer en verdi, og det andre er på en måte hvem eller hva som skal få denne verdien. I dette tilfellet skal det være selve bilen, altså den vi har referert til som this i hele klassen. Problemet er at this også kunne ha vært selve prismedmoms, men vi kan sørge for at det blir bilen som får det ved å sette inn this som en parameter etter funksjonen. Dette virker noen ganger litt tungvindt, og vi kan omgå dette ved å døpe om bilens this til self. Da behøver vi ikke ha med den andre parameteren. La oss gjøre dette, og fortsette den praksisen i vårt videre arbeid med bilregisteret. 8

9 Bilregister med knockout.js Informasjonsteknologi 2 En modell for hele registeret La oss forsøke å lage en modell som skal hjelpe oss å holde styr på alle bilene i registeret vårt. Vi kan kalle den Bilregister, og den skal i første omgang inneholde en liste (array) med biler. Etter funksjonen/klassen Bil, lager vi nå en klasse for Bilregister. Deretter opretter vi et bilregister-objekt, og knytter det til konockout i stedet for bilen: Umiddelbart vil det se ut som om vi går ett skritt tilbake. Nettsiden vår slutter å virke. Det er fordi vi forsøker å vise frem verdiene til merke, modell, pris og prismedmoms. Men disse finnes jo ikke i Bilregister. Derimot er det én av dem for hver bil i registeret. Hvis vi legger et par biler inn i bilregisteret, vil vi nærme oss: Legg merke til at biler er et såkalt observablearray. Dette virker på samme måte som en observable, men det er altså et array, eller en liste. Vi kan bruke vanlige JavaScriptpush for å legge til elementer i listen. 9

10 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Vi må oppdatere grensesnittet Da vi lagde html-koden, hadde vi kun én bil å forholde oss til. Nå må vi sørge for at vi viser alle bilene. Bilene våre ligger lagret i arrayet i bilregisteret; biler. Vi må altså gå gjennom hvert element i arrayet for å kunne vise frem alle bilene. Dette skjer med en liten endring i html-koden. Først fjerner vi data-bindingene i input-feltene. Disse skal vi endre på senere. Deretter må vi i tabellen si at vi nå for hver bil skal vise frem dataene våre: For hver bil, lager vi nå en rad i tabellen, og fyller den opp med merke, modell osv. Da er vi tilbake på sporet: 10

11 Bilregister med knockout.js Informasjonsteknologi 2 Registrere flere biler Hensikten med registeret er vel at vi ønsker å registrere flere biler Vi kan ikke knytte verdiene i input-feltene til bilene, siden vi da ikke vil vite hvilken bil de hører til. Vi må dermed lage 3 attributter som tar vare på de nye verdiene som skal legges inn når vi registrerer en ny bil. Dette gjør vi i bilregisteret: Nå kan vi knytte disse verdiene til input-feltene i grensesnittet vårt. Vi lager også en knapp som setter i gang en funksjon som registrerer en ny bil. (Vi har ikke laget denne funksjonen ennå. Følg med, så kommer det) Funksjonen legger vi også inn i bilregisteret. Den skal ikke returnere noen verdi, så det er en helt vanlig funksjon. Legger denne på slutten inne i function Bilregister(). Se hele koden frem til nå på neste side. 11

12 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Fortsetter på neste side 12

13 Bilregister med knockout.js Informasjonsteknologi 2 13

14 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Endre på biler som er registrert Hva om vi registrerer feil. Da kan det være praktisk å kunne endre på informasjonen vi har lagt inn. La oss først legge inn verdiene for bilene både i et input-felt og i et span-element: Hva gjør vi egentlig her. Jo, i stedet for å kun vise frem verdien med databind= text:merke, legger vi inn et input-felt ved siden av, som gir oss mulighet til å endre verdiene for de bilene vi ønsker. Oppdateringen skjer i det vi skriver inn en ny verdi og trykker enter: Men det ser kanskje ikke så elegant ut. Hva om vi lager oss en liten knapp som gjør input-feltene synlige når vi skal redigere innhold, og ellers kun viser frem informasjonen. 14

15 Bilregister med knockout.js Informasjonsteknologi 2 Vi kan lage en liten veriabel som heter redigerbar. Den settes til true hvis det skal være lov å redigere tabellen. Eller settes den til false. Knappen kan styre dette. Først oppretter vi variabelen: Hva skal være synlig? Så setter vi hva som skal være synlig i HTML-koden vår: Så når bilregisterets attributt redigerbar er true, vil input-feltene være synlige. Vi refererer til bilregisteret som $root, altså moderskipet som alle bilene ligger innunder. Vi kan på lignende måte sette alle span-elementene til synlige hvis redigerbar er false: Gjør dette for alle de 3 span-elementene. Til slutt må vi lage en liten funksjon som veksler på å sette redigerbar til true og false: 15

16 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Og så en liten knapp En liten knapp kan styre det hele Denne legger vi inn rett etter tabellen i html-koden. Vi kan gjøre det litt mer snedig, ved å endre teksten til Lager endringer, når vi er ferdige med redigeringen: Da må vi opprette en liten variabel som heter for eksempel knappetekst: Til slutt binder vi verdien av knappetekst til knappen vår: Eksempelet finner du her: Vi går nå videre og ser på hvordan vi kan forbedre løsningen ytterligere. 16

17 Bilregister med knockout.js Informasjonsteknologi 2 Fjerne en bil Hva om vi vil fjerne en bil vi har registrert? Det kan vi løse ved å legge inn en liten knapp i tabellen, og knytte denne til en funksjon i datamodellen vår. Først legger vi inn en tom celle i tabellen: Helt på slutten skjøter vi på en <th></th> Ser ingen grunn til å ha noen overskrift for fjerne-knappen. Deretter legger vi inn en celle ekstra hvor vi legger inn knappen: Denne legger vi inn rett etter den siste celle med momsen. Vi må skrive $root, siden funksjonen må ligge i Bilregister-klassen, og ikke inne i selve Bil-klassen. Det er jo i Bilregister vi har arrayet med alle bilene ( biler ). Husk på at vi itererer over alle bilene når vi lager tabellen, med en foreach: biler. Når vi klikker på knappen, sender vi av gårde en parameter i klikk-hendelsen, og denne parameteren er bilen selv. Så for å fjerne den, kan vi gjøre dette meget enkelt inne i Bilregister: Vi legger dette inn helt på bunnen av Bilregister-klassen, rett etter nybil-funksjonen. 17

18 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Lokal lagring Det er et litt unyttig bilregister, hvis vi mister alle dataene hver gang vi oppdaterer eller lukker siden. La oss prøve å lafre dataene lokalt. Til dette kan vi bruke localstorage, som vi har sett på i en tidligere leksjon. I starten av koden, legger vi inn en sjekk på om det faktisk er noen biler i registeret fra før av. Hvis det er det, henter vi inn bilene fra localstorage, og sier at minebiler nå skal ha verdien av localstorage.minebiler. (Jeg gir dem samme nav for enkelthets skyld). Hvis det ikke er lagret noe, sier vi at minebiler skal være et tomt array. Vi gjør noen endringer der hvor vi tidligere opprettet biler-arrayet i Bilregister-klassen: Her lagde vi tidligere et tomt array, og pushet inn 2 biler. De fjerner vi nå. I stedet legger vi inn bilene fra arrayet som er lagret i localstorage. minebiler er et vanlig array, så her henter vi ut attributtene som vi gjør med vanlige objekter, altså: minebiler[i].merke, uten parentesen under. 18

19 Bilregister med knockout.js Informasjonsteknologi 2 ko.tojson Til slutt må vi sørge for at vi lagrer bilene i localstorage hver gang vi legger til eller fjerner en bil. Hver gang dette skjer bruker vi ko.tojson(self.biler()): I linje 115 og 121 lagrer vi arrayet til localstorage. Det som er verdt å merke seg, er at vi kun lagrer verdiene som objektene har i øyeblikket. ko-objektet blir detronisert, og vi sitter igjen med et vanlig array. Det er grunnen til at vi må lage nye biler med new Bil(), som vi så på forrige side, når vi oppdaterer siden. 19

20 sdsd Bilregister med knockout.js Informasjonsteknologi 2 Hva koster alle bilene til sammen? Kanskje vi ønsker å vite hva alle bilene koster til sammen? Det burde være en smal sak å regne ut. Vi kan lage et felt under tabellen som viser nettopp dette: Dette legger vi inn etter knappen for å redigere bilregisteret. Da er vi ute av loopen som viser bildene, og totalsum vil da være en verdi som ligger inni Bilregister. Det er jo også her vi har oversikt over alle bilene i arrayet biler, så det passer bra. Her kan vi gå gjennom arrayet, og summere prisene. Husk at alle verdier som er basert på andre verdier bør defineres som ko.computed. Det burde gjøre susen. Koden for den utvidede løsningen ligger her: Jeg har brukt HTML Kickstart for å pynte litt. 20