Indholdsfortegnelse
Overførslen af den hårdeste del af applikationen til klientsiden bliver mere og mere almindelig, og dermed henvises serversprog til kun at være dem, der håndterer vedholdenhed gennem tjenester HVILE.En del af ansvaret for at alt dette sker sker på de nye måder at arbejde med JavaScript og generation af dynamiske og lydhøre brugergrænseflader takket være de forskellige rammer eksisterende.
Denne ramme har mange styrker som sin lave vægt og dens dokumentation, samt at den har været på markedet i lang tid, så den har modnet konsekvent for at kunne anvendes i produktionsmiljøer.
1- Som de fleste biblioteker og rammer af JavaScript kravene er ikke så krævende, i dette tilfælde skal vi bruge en lille webserver til bedre at behandle vores anmodninger, det kan være Wamp i Windows eller et eksempel på Apache i Linux eller Mac.
2- Vi har brug for en rich text editor i stil med Sublim tekst eller NotePad ++ for at kunne skrive den nødvendige kode for at opfylde de eksempler og øvelser, som vi vil vise.
3- Endelig har vi brug for internetadgang for at kunne downloade Knockout.js endda en gang.
Installationsprocessen er ganske enkel og afhænger ikke af en bestemt platform, processen vil være den samme, uanset om vi er i Windows, Linux eller MAC.
Den første ting, vi skal gøre, er at downloade Knockout.js fra den officielle side, for dette kan vi gå til projektets websted og i afsnittet om Downloads vi højreklikker og vælger indstillingen Gem link som:
FORSTØRRE
Når vi har filen, skal vi blot inkludere den i en fil HTML som følger:
Installation af Knockout.jsSom vi kan se, måtte vi kun inkludere den downloadede fil via et script -tag. Hvis vi ønsker at arbejde med versionen af CDN Vi skal kun ændre den lokale sti til filens internetsti, dette ligner meget at arbejde med biblioteker som f.eks. jQuery eller rammer som VinkelJS.
Modelvisning Se modelTitlen på dette afsnit kan virke som en fejl. Hvordan er det muligt at tale om Model View View Model? Er det ikke det samme? Det viser sig Slå ud har et designmønster eller udviklingsparadigme, hvor det har inspiration fra MVC, hvor bestemt den Model og Udsigt de opfører sig som det, vi kender fra den "klassiske" tilgang, men vi har et nyt lag kaldet ViewModel som har ansvaret for at forene og give funktionalitet til vores synspunkter.
Databinding er hovedkarakteristikken for vores rammer, der giver os mulighed for at angive til dokumentet HTML som er de elementer, du skal give adgang til Knockout.js, selvom det lyder som noget komplekst, kan vi opsummere det som noget enklere, det er den enkle anvendelse af egenskaber på træets elementer SOL hvor vi ønsker, at den skal have ydeevne Knockout.js.
Lad os se følgende eksempelkode, lad os sige, at vi vil udskrive et navn fra vores ViewModel på en etiket inde i legeme, til dette skal vi kun gøre følgende:
Installation af Knockout.jsDet ser vi inden for vores etiket h1 der er et span -tag, og span -tagget har en egenskab, der ikke er hjemmehørende i HTML hvad er ejendommen databinding, det er det, der får os til at forbinde Knockout.js med vores DOM træ i dette tilfælde har vi ganske enkelt angivet, at ejendommen eller variabelnavnet skal tages fra vores ViewModel.
Hvis vi kører vores eksempel i browseren, får vi et resultat som det, vi kan se på følgende billede:
Nu må vi have indset den filosofi ViewModel er en vigtig del af arbejdet i Knockout.js, derfor vil vi fortsætte med at fordybe os lidt mere i emnet.
Oprettelse af VistaModelDer er to måder at oprette en modelvisning på, den grundlæggende form og den objektorienterede, hvilken vi bruger allerede afhænger af vores måde at udvikle på, selvom den anbefalede er objektorienteret da det i begyndelsen er mere komplekst, giver det os mulighed for at opnå en bedre orden i vores applikation.
For at oprette en ViewModel grundlæggende skal vi bare gøre noget som følgende:
var myModelView = {navn: 'Pedro Perez'};Som vi ser det, er det slet ikke komplekst, vi definerer simpelthen en variabel og placerer et stilindhold på den. JSON.Nu vejen objektorienteret giver os mulighed for at oprette metoder til adgang og manipulation af de egenskaber, som vi ønsker at placere i vores ViewModel, for dette kan vi gøre noget 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 tilfælde, kan vi direkte få adgang til navnet eller efternavnet individuelt eller bruge metoden getName () der giver os navnet og efternavnet forbundet eller sammenkædet.Her kan mange undre sig over, om det ikke var lettere at lave en solo Snor Med navn og efternavn er svaret meget enkelt, jo flere muligheder vi har, jo enklere vil ansøgningen være i vores opfattelse, forestil dig, at vi kun ville have navnet, med den grundlæggende form, vi ville have været nødt til at behandle strengen til at være i stand til at adskille dem, i objektorienteret ændring får vi kun adgang til den ejendom, der interesserer os.
Indtil videre er det, vi har set, meget statisk, hvad nu hvis vi begynder at bruge parametre, på denne måde a ViewModel Det kan tjene mange formål, da vi ikke vil begrænse os til det, vi etablerer, men vi kan ændre dataene i henhold til situationen.
Lad os omskrive vores form objektorienteret, og vi vil bruge følgende formular:
var myOOOOOOOFModelView = funktion (fornavn, efternavn) {var self = this; self.name = navn; selv. efternavn = efternavn; self.getName = function () {return self.name + '' + self.last name; };};Som vi kunne se, var det meget let at implementere brugen af parametre, nu skal vi implementere dette i vores første eksempel og dermed se, hvordan alt passer på plads, til dette vil vi bruge følgende HTML -kode:
Installation af Knockout.jsHer er det første, vi bemærker, at databinding det er det ikke længere tekst som i det første eksempel, hvis ikke vi bruger html, dette giver os mulighed for at sende etiketter html og dermed være i stand til at give mere stil til vores svar fra ViewModel.
Allerede i det afsnit, hvor vi definerer vores ViewModel vi ser det, før vi anvender bindende af Knockout.js, vi laver en forekomst af vores ViewModel objektorienteret, Det er på dette tidspunkt, hvor vi kan give værdierne til vores parametre eller egenskaber, som vi kan se, vi beholdt vores adskillelse af navn og efternavn, men i sidste ende kan vi bruge den metode, der sammenkæder dem.
Når vi kører vores eksempel, giver det os følgende resultater i browseren:
Med dette afslutter vi vores tutorial, vi har med succes taget vores første skridt med Knockout.jsMed dette kan vi begynde at tænke på alle de muligheder, som denne applikationsudviklingsramme giver os med logik på klientsiden.
