Razumijevanje vezivanja podataka u Knockout.js

Vezivanje podataka to nije ništa drugo do sjedinjavanje dinamičkih podataka bilo teksta ili HTML -a u različitim dijelovima stabla SUNCE našeg dokumenta u kojem Knockout.js radi, to nam omogućuje generiranje dinamičkog sadržaja iz prikaza i modela.
Ovaj se koncept može naći u velikom broju razvojnih okvira za JavaScript budući da je to vrlo učinkovit način izražavanja razvojne logike, pa je od vitalne važnosti da razumijemo kako to funkcionira i kako nam može olakšati život pri izradi naših aplikacija.
ZahtjeviGlavni uvjet je sposobnost izvršavanja Knockout.js bez obzira jesmo li ga preuzeli ili uključili iz CDN. Trebat će nam i poslužitelj stila Apač za posluživanje naše stranice i uređivač teksta poput Uzvišen tekst ili NotePad ++ za izradu dokumenata koje će naše aplikacije nositi.
Najbolji način da vidite Vezivanje podataka je s primjerom, pogledajmo u sljedećem kodu kako smo stvorili dokument HTML gdje uključujemo Knockout.js, tada smo u svom tijelu stvorili oznaku H1 u njoj pravimo a vezanje podataka od HTML, to znači da čeka HTML kôd.
U dijelu JavaScript jednostavno ono što smo učinili je stvoriti a model pogleda te u njemu definirajte neke atribute kako biste mogli raditi s njim. Zanimljivo je da nam to omogućuje prijenos podataka s našeg model pogleda na dio HTML -a. Pogledajmo kako izgleda naš kod:

 Vezivanje podataka u knockout.js 

Prilikom pozivanja našeg dokumenta iz preglednika dobivamo sljedeći rezultat:

Ovdje vidimo kako smo izgradili metodu koja vraća ime i malo HTML da bismo mu dali stil, to znači da možemo imati beskonačan raspon mogućnosti, ali možda se najviše ističe to što možemo primijeniti vezivanje podataka gotovo na bilo koju stavku. Tako možemo poslati tekst, HTML itd.
No, ne samo da nam omogućuje ispis teksta korisniku, već također možemo uključiti CSS, klase i atribute u naše naljepnice HTML, omogućujući nam da kontroliramo gotovo svaki aspekt naše stranice bez potrebe za postavljanjem statičkih vrijednosti.
Pogledajmo u sljedećem primjeru kako oznaci dajemo posebnu klasu HTML, ideja je da možemo generirati dinamičke stilove bez potrebe za intervencijom kada imamo aplikaciju koja traži font ODMOR, međutim u ovom ćemo slučaju radi pojednostavljenja učitati samo jednu komponentu dinamički:

 Vezivanje podataka u knockout.js 
 

Tada primjećujemo kako možemo prenijeti komponentu stil koji će definirati izgled teksta, mogli bismo dodati i klasu i na kraju svoj tekst zovemo iz modela, također primjećujemo da sve to radimo u istom vezivanje podataka, samo odvajajući različite elemente zarezima.
Ako pokrenemo naš novi primjer, rezultat u našem pregledniku je sljedeći:

POVEĆAJTE

Obratimo posebnu pozornost na dio ispravljač pogrešaka od HTML preglednika, ovdje vidimo gdje su elementi vezivanje podataka učinkovito su preneseni na etiketu.
Postoje i druge značajke koje možemo koristiti s vezivanje podataka, jedan od njih su uvjeti, odnosno možemo postaviti jedan ili drugi element unutar svojih oznaka HTML uzimajući u obzir različita svojstva našeg modela. Pogledajmo sljedeći kod gdje koristimo primjer ovog stila:

 Uvjetno vezivanje podataka 
 

U našem prikazu modela definirali smo atribut zvan id koji smo postavili na 0, zatim u našem HTML u odjeljku vezivanje podataka Definirali smo ternarni operator, gdje specificiramo ako je ID prikaza modela 0, ispisuje 'Hello', inače ispisuje 'Goodbye'.
Pokrenimo primjer u pregledniku da vidimo njegov rezultat:

Zanimljiva bi vježba bila ako možete promijeniti id u drugu vrijednost za potvrdu operacije, zato ga ostavljamo kao zadatak.
Nešto vrlo važno što moramo uzeti u obzir je kontekst naših elemenata, to je zato što Knockout.js koristi hijerarhijsku strukturu Otac sin za rukovanje različitim svojstvima koja dobivamo iz prikaza modela.
To znači da uvijek radimo na temelju roditelja, pa tako možemo pristupiti njegovim svojstvima, generirajući tako svojstva djeteta koja se razlikuju od druge djece koja su na istoj razini, čime možemo ugraditi različite vrijednosti.
Kako je sve relativno u odnosu na kontekst, vidimo da bismo u prethodnim primjerima mogli koristiti tekst za povezivanje podataka bez potrebe da naznačite kome pripada, jer kada se to dogodi, Knockout.js odmah pretpostavlja kontekst sadašnjeg djeteta. Pogledajmo u nastavku različite vrste konteksta koje možemo obraditi u našoj aplikaciji:
$ rootTo je glavni kontekst, odakle potječe naš pogled na model, kada se pozove iz bilo kojeg dijela naše aplikacije, uvijek će tražiti hijerarhijski i odnos s najvišim prioritetom u našoj strukturi, poseban je po tome što imamo mnogo djece i želimo nešto od starijeg roditelja.
$ roditeljDjeluje slično kao $ root, s tom razlikom što se odnosi samo na neposrednog roditelja našeg elementa, pa je njegov opseg ograničen na to, naširoko se koristi kada radimo s ciklusima za svakoga roditi mnogo djece.
$ roditeljiDodavanje množine u ovaj kontekst govori nam da gradimo svojevrsni aranžman ili niz koji sadrži indeks za svakog od roditelja djeteta odakle ga zovemo, ovako $ roditelji [0] je neposredni otac, $ roditelji [1] je roditelj neposrednog roditelja i tako dalje.
$ podaciOmogućuje nam pristup podacima konteksta u kojem smo pozicionirani, obično se koristi kada radimo sa sadržajima koji su varijable i moramo pristupiti svojstvima pogleda modela.
$ indeksDostupan je samo kada radimo s petljama za svakoga i omogućuje nam pristup različitim položajima našeg elementa.
Kad moramo ponoviti niz elemenata, to je trenutak kada moramo koristiti petlju za svakoga, ovo će proći kroz niz ili popis elemenata i na taj način možemo sastaviti naš popis u dokumentu HTML.
U sljedećem primjeru imat ćemo svojstvo koje se naziva knjige u našem prikazu modela, a zatim ćemo ga prelaziti s za svakoga koristeći jednu od kontekstnih varijabli, u ovom slučaju $ podaci, da vidimo:

 Veza podataka za svaki

Ako vidimo rezultat preglednika, primijetit ćemo operaciju koja se događa uzimajući u obzir sve koncepte koje smo naučili tijekom vodiča.

Ovim smo završili ovaj vodič, naučili smo i imali dublji kontakt s Knockout.js, važno je na vrlo dubok i čvrst način razumjeti koncepte onoga što je vezivanje podataka, već je način na koji ćemo koristiti podatke, atribute i svojstva pogleda naših modela. Također smo mogli razumjeti vrlo važan koncept kao što je kontekst, sada možemo razumjeti kako se različiti elementi razlikuju i zašto Knockout.js zna kada neke podatke treba prenijeti preko drugih, a to je zato što uvijek zna kontekst naših elemenata.