Forstå databinding i Knockout.js

Databinding det er intet mere end foreningen af ​​dynamiske data, hverken tekst eller HTML i de forskellige dele af træet SOL af vores dokument, hvor vi har Knockout.js, kan dette generere dynamisk indhold fra visninger og modeller.
Dette koncept findes i et stort antal udviklingsrammer for JavaScript da det er en meget effektiv måde at udtrykke udviklingslogikken på, så det er meget vigtigt, at vi forstår, hvordan det fungerer, og hvordan det kan gøre vores liv lettere, når vi laver vores applikationer.
KravHovedkravet er at kunne eksekvere Knockout.js om vi har downloadet det eller inkluderet det fra en CDN. Vi skal også bruge en stil -server Apache for at betjene vores side og en tekstredigerer som Sublim tekst eller NotePad ++ for at oprette de dokumenter, som vores applikationer vil bære.
Den bedste måde at se Databinding er med et eksempel, lad os se i følgende kode, hvordan vi har oprettet et dokument HTML hvor vi inkluderer Knockout.js, så har vi i vores krop skabt en etiket H1 i den laver vi en databinding af HTML, betyder det, at den venter på HTML -kode.
I delen JavaScript simpelthen det vi gjorde var at oprette en visningsmodel og i det definere nogle attributter for at kunne arbejde med det. Det interessante er, at dette giver os mulighed for at videregive data fra vores visningsmodel til en del af HTML. Lad os se, hvordan vores kode ser ud:

 Databinding i knockout.js 

Når vi ringer til vores dokument fra vores browser, får vi følgende resultat:

Her ser vi, hvordan vi har bygget en metode, der returnerer navnet og lidt af HTML for at give det stil betyder det, at vi kan have en uendelig række muligheder, men det, der måske skiller sig mest ud, er, at vi kan anvende en databinding til næsten enhver vare. Så vi kan sende tekst, HTML osv.
Men ikke kun det, der tillader os, er at udskrive tekst til brugeren, vi kan også inkorporere CSS, klasser og attributter til vores etiketter HTML, så vi kan kontrollere næsten alle aspekter af vores side uden at skulle angive statiske værdier.
Lad os i det følgende eksempel se, hvordan vi giver en etiket en særlig klasse HTML, tanken er, at vi kan generere dynamiske stilarter uden at skulle gribe ind, når vi har et program, der søger efter en skrifttype HVILEmen i dette tilfælde for at forenkle vil vi kun indlæse en komponent dynamisk:

 Databinding i knockout.js 
 

Vi bemærker derefter, hvordan vi kan passere en komponent stil som vil definere tekstens udseende, kunne vi også tilføje en klasse, og endelig kalder vi vores tekst fra modellen, vi bemærker også, at vi gør alt dette på samme måde databinding, kun adskille de forskellige elementer med kommaer.
Hvis vi kører vores nye eksempel, er resultatet i vores browser som følger:

FORSTØRRE

Lad os være særlig opmærksom på den del af fejlfinding af HTML i browseren, her ser vi, hvor elementerne i databinding de blev effektivt overført til etiketten.
Der er andre funktioner, som vi kan bruge med databinding, en af ​​dem er betingelserne, det vil sige, at vi kan placere et eller andet element inden for vores etiketter HTML under hensyntagen til de forskellige egenskaber ved vores model. Lad os se følgende kode, hvor vi bruger et eksempel på denne stil:

 Betinget databinding 
 

I vores modelvisning har vi defineret en attribut kaldet id, at vi sætter den til 0, derefter i vores HTML i afsnittet af data binder Vi har defineret en ternær operator, hvor vi angiver, at hvis id'et for modelvisningen er 0, udskrives det "Hej" ellers udskrives det "Farvel".
Lad os køre eksemplet i browseren for at se resultatet:

En interessant øvelse ville være, hvis du kan ændre id'et til en anden værdi for at bekræfte handlingen, derfor lader vi det være som en opgave.
Noget meget vigtigt, som vi skal tage højde for, er konteksten af ​​vores elementer, det er fordi Knockout.js bruger en hierarkisk struktur af Fader søn at håndtere de forskellige egenskaber, som vi får fra modelvisningerne.
Det betyder, at vi altid arbejder baseret på en forælder, og dermed kan vi få adgang til dets egenskaber og dermed generere egenskaber for barnet, der adskiller sig fra andre børn, der er på samme niveau, og dermed kunne inkorporere forskellige værdier.
Da alt er i forhold til konteksten, ser vi, at vi i de tidligere eksempler kunne bruge data binder tekst uden at skulle angive, hvem den tilhører, da når dette sker, Knockout.js det antager straks konteksten for det nuværende barn. Lad os se nedenfor de forskellige konteksttyper, som vi kan håndtere i vores applikation:
$ rootDet er hovedkonteksten, det er hvorfra vores modeludsigt stammer, når det påberåbes fra en hvilken som helst del af vores ansøgning, vil det altid lede efter det mest hierarkiske og højeste prioritetsforhold i vores struktur, det er specielt for når vi har mange børn og vi vil have noget fra den ældre forælder.
$ forælderDet fungerer på samme måde som $ root, med den forskel, at det kun refererer til den umiddelbare forælder til vores element, så dets omfang er begrænset til det, det er meget udbredt, når vi arbejder med cykler for hver at generere mange børn.
$ forældreTilføjelsen af ​​flertallet til denne kontekst fortæller os, at vi bygger en slags arrangement eller array, der indeholder et indeks for hver af forældrene til barnet, hvorfra vi kalder det, som dette $ forældre [0] er den nærmeste far, $ forældre [1] er forælder til den nærmeste forælder og så videre.
$ dataDet giver os mulighed for at få adgang til dataene i den kontekst, hvor vi er placeret, det bruges generelt, når vi arbejder med indhold, der er variabler, og vi har brug for at få adgang til vores modelvisningsegenskaber.
$ indeksDet er kun tilgængeligt, når vi arbejder med sløjfer for hver og det giver os mulighed for at få adgang til de forskellige positioner af vores element.
Når vi skal iterere over en række elementer, er det det øjeblik, hvor vi skal bruge sløjfen for hver, dette vil gå gennem en matrix eller en liste over elementer, og på denne måde kan vi bygge vores liste i dokumentet HTML.
I det følgende eksempel vil vi have en ejendom kaldet bøger i vores modelvisning, og derefter vil vi krydse den med en for hver gør brug af en af ​​kontekstvariablerne, i dette tilfælde $ data, Lad os se:

 Databinding for hver

Hvis vi ser resultatet af browseren, vil vi bemærke den handling, der sker, når vi tager hensyn til alle de begreber, vi har lært under vejledningen.

Med dette afslutter vi denne vejledning, vi har lært og haft en mere dybtgående kontakt med Knockout.js, er det vigtigt på en meget dyb og solid måde at forstå begreberne om, hvad der er databinding, er allerede den måde, hvorpå vi vil bruge data, attributter og egenskaber for vores modelvisninger. Vi var også i stand til at forstå et meget vigtigt begreb som kontekst, nu kan vi forstå, hvordan de forskellige elementer er forskellige og hvorfor Knockout.js det ved, hvornår man skal få nogle data frem for andre, og det er fordi det altid kender konteksten for vores elementer.