Innholdsfortegnelse
Overføringen av den vanskeligste delen av applikasjonen til klientsiden blir mer og mer vanlig, og dermed henvises server -språk til bare å være de som håndterer utholdenhet gjennom tjenester HVILE.En del av ansvaret for at alt dette skal skje, faller på de nye måtene å jobbe med JavaScript og generasjonen av dynamiske og responsive brukergrensesnitt, takket være de forskjellige rammer eksisterende.
Dette rammeverket har mange styrker som lav vekt og dokumentasjon, samt at det har vært på markedet lenge, så det har modnet konsekvent for å kunne brukes i produksjonsmiljøer.
1- Som de fleste biblioteker og rammer for JavaScript kravene er ikke så krevende, i dette tilfellet trenger vi en liten webserver for bedre å kunne behandle forespørslene våre, det kan være Wamp i Windows eller et eksempel på Apache i Linux eller Mac.
2- Vi trenger en rik tekstredigerer i stil med Sublim tekst eller NotePad ++ for å kunne skrive den nødvendige koden for å oppfylle eksemplene og øvelsene vi skal vise.
3- Endelig trenger vi internettilgang for å kunne laste ned Knockout.js enda en gang.
Installasjonsprosessen er ganske enkel og avhenger ikke av en bestemt plattform, prosessen vil være den samme om vi er inne Windows, Linux eller MAC.
Det første vi må gjøre er å laste ned Knockout.js fra den offisielle siden, for dette kan vi gå til prosjektets nettsted og i delen av nedlastinger vi høyreklikker og velger alternativet Lagre lenke som:
FORSTØRRE
Når vi har filen, må vi bare inkludere den i en fil HTML som følger:
Installerer Knockout.jsSom vi kan se, måtte vi bare inkludere den nedlastede filen gjennom en script -tag. I tilfelle vi ønsker å jobbe med versjonen av CDN Vi trenger bare å endre den lokale banen til Internett -banen til filen, dette ligner veldig på å jobbe med biblioteker som f.eks. jQuery eller rammer som AngularJS.
Modellvisning Vis modellTittelen på denne delen kan virke som en feil. Hvordan er det mulig å snakke om Model View View Model? Er det ikke det samme? Det viser seg at Slå ut har et designmønster eller utviklingsparadigme der det har inspirasjon fra MVC, hvor absolutt Modell og Utsikt de oppfører seg som det vi kjenner fra den "klassiske" tilnærmingen, men vi har et nytt lag som heter ViewModel som har ansvaret for å forene og gi funksjonalitet til våre synspunkter.
Databinding er hovedkarakteristikken for vårt rammeverk som lar oss indikere for dokumentet HTML som er elementene du må gi tilgang til Knockout.js, selv om det høres ut som noe komplekst, kan vi oppsummere det som noe enklere, det er den enkle anvendelsen av egenskaper på elementene i treet SOL der vi vil at den skal ha ytelse Knockout.js.
La oss se følgende eksempelkode, la oss si at vi vil skrive ut et navn fra vår ViewModel på en etikett inne i kropp, for dette trenger vi bare å gjøre følgende:
Installere Knockout.jsVi ser det på etiketten vår h1 det er en span -tag, og span -taggen har en egenskap som ikke er opprinnelig til HTML hva er eiendommen data-bind, det er dette som får oss til å koble til Knockout.js med vår DOM -tre i dette tilfellet har vi ganske enkelt angitt at egenskapen eller variabelnavnet skal hentes fra vårt ViewModel.
Hvis vi kjører eksemplet vårt i nettleseren, får vi et resultat som det vi kan se i følgende bilde:
Nå må vi ha innsett den filosofien ViewModel er en viktig del av arbeidet i Knockout.js, derfor kommer vi til å fortsette å fordype oss litt mer i emnet.
Opprettelse av VistaModelDet er to måter å lage en modellvisning på, den grunnleggende formen og den objektorienterte, hvilken vi bruker allerede avhenger av måten vi utvikler på, selv om den anbefalte er objekt orientert siden selv om det er mer komplekst i begynnelsen, tillater det oss å oppnå en bedre orden i applikasjonen vår.
For å lage en ViewModel grunnleggende må vi bare gjøre noe som følgende:
var myModelView = {navn: 'Pedro Perez'};Slik vi ser det, er det ikke komplisert i det hele tatt, vi definerer ganske enkelt en variabel og legger et stilinnhold på den. JSON.Nå er veien objekt orientert lar oss lage metoder for tilgang og manipulering av eiendommene vi ønsker å plassere i vår ViewModel, for dette kan vi gjøre noe som følgende:
var myOOOOOOFModelView = function () {var self = this; self.name = 'Jonathan'; self.lastname = 'Acosta'; self.getName = function () {return self.name + '' + self.last name; };};Hvis vi vil i dette tilfellet, kan vi få tilgang til navnet eller etternavnet individuelt, eller bruke metoden getName () som gir oss navnet og etternavnet forbundet eller sammenkoblet.Her kan mange lure på om det ikke var lettere å lage en solo String Med navn og etternavn er svaret veldig enkelt, jo flere alternativer vi har, jo enklere vil søknaden være etter vårt syn, tenk at vi bare ønsket navnet, med den grunnleggende formen ville vi ha måttet behandle strengen for å være i stand til å skille dem, i objektorientert endring får vi bare tilgang til eiendommen som interesserer oss.
Så langt er det vi har sett veldig statisk, hva om vi begynner å bruke parametere på denne måten a ViewModel Det kan tjene mange formål, siden vi ikke vil begrense oss til det vi etablerer, men vi kan endre dataene i henhold til situasjonen.
La oss skrive om formen vår objekt orientert, og vi vil bruke følgende skjema:
var myOOOOOOOFModelView = funksjon (fornavn, etternavn) {var self = this; self.name = navn; selv. etternavn = etternavn; self.getName = function () {return self.name + '' + self.last name; };};Som vi kunne se var det veldig enkelt å implementere bruk av parametere, nå skal vi implementere dette i vårt første eksempel og dermed se hvordan alt passer på plass, for dette vil vi bruke følgende HTML -kode:
Installere Knockout.jsHer er det første vi legger merke til at data-bind det er ikke lenger tekst som i det første eksemplet hvis ikke vi bruker html, dette lar oss sende etiketter html og dermed kunne gi mer stil til vårt svar fra ViewModel.
Allerede i delen der vi definerer vår ViewModel vi ser det før vi bruker bindende av Knockout.js, vi gjør en forekomst av vår ViewModel objekt orientert, Det er på dette punktet hvor vi kan gi verdiene til våre parametere eller egenskaper, som vi kan se, beholdt vi separasjonen mellom navn og etternavn, men til slutt kan vi bruke metoden som sammenføyer dem.
Når vi kjører vårt eksempel, gir det oss følgende resultater i nettleseren:
Med dette fullfører vi opplæringen, vi har vellykket tatt våre første skritt med Knockout.jsMed dette kan vi begynne å tenke på alle mulighetene som dette rammeverket for applikasjonsutvikling gir oss med logikk på klientsiden.
