Forstå databinding i Knockout.js

Databinding det er ikke annet enn foreningen av dynamiske data, enten tekst eller HTML i de forskjellige delene av treet SOL av dokumentet vårt der vi har Knockout.js som fungerer, lar dette oss generere dynamisk innhold fra visninger og modeller.
Dette konseptet finnes i et stort antall utviklingsrammer for JavaScript siden det er en veldig effektiv måte å uttrykke utviklingslogikken på, så er det svært viktig at vi forstår hvordan det fungerer og hvordan det kan gjøre våre liv enklere når vi lager applikasjoner.
KravHovedkravet er å kunne utføre Knockout.js enten vi har lastet den ned eller inkludert den fra en CDN. Vi trenger også en stilserver Apache for å betjene siden vår, og et tekstredigeringsprogram som Sublim tekst eller NotePad ++ for å lage dokumentene som applikasjonene våre vil bære.
Den beste måten å se Databinding er med et eksempel, la oss se i følgende kode hvordan vi har opprettet et dokument HTML der vi inkluderer Knockout.js, så i kroppen vår har vi laget en etikett H1 i den lager vi en data-bind av HTML, betyr dette at den venter på HTML -kode.
I delen JavaScript rett og slett det vi gjorde var å lage en visningsmodell og i det definere noen attributter for å kunne jobbe med det. Det interessante er at dette lar oss overføre dataene fra våre visningsmodell til en del av HTML -koden. La oss se hvordan koden vår ser ut:

 Databinding i knockout.js 

Når vi ringer dokumentet vårt fra nettleseren, får vi følgende resultat:

Her ser vi hvordan vi har bygget en metode som returnerer navnet og litt av HTML for å gi det stil, betyr dette at vi kan ha et uendelig utvalg av muligheter, men det som kanskje skiller seg mest ut er at vi kan bruke en databinding til nesten alle varer. Så vi kan sende tekst, HTML, etc.
Men ikke bare det som tillater oss er å skrive ut tekst til brukeren, vi kan også inkorporere CSS, klasser og attributter til etikettene våre HTML, slik at vi kan kontrollere nesten alle aspekter av siden vår uten å måtte angi statiske verdier.
La oss se i eksemplet nedenfor hvordan vi gir en etikett en spesiell klasse HTML, er tanken at vi kan generere dynamiske stiler uten å måtte gripe inn når vi har et program som søker i en skrift HVILEmen i dette tilfellet for å forenkle, skal vi bare laste en komponent dynamisk:

 Databinding i knockout.js 
 

Vi legger deretter merke til hvordan vi kan passere en komponent stil som vil definere tekstens utseende, kan vi også legge til en klasse og til slutt kaller vi teksten vår fra modellen, vi merker også at vi gjør alt dette på samme måte databinding, bare skille de forskjellige elementene med kommaer.
Hvis vi kjører vårt nye eksempel, er resultatet i nettleseren vår som følger:

FORSTØRRE

La oss være spesielt oppmerksom på delen av feilsøkingsprogram av HTML i nettleseren, her ser vi hvor elementene i databinding de ble effektivt overført til etiketten.
Det er andre funksjoner som vi kan bruke med databinding, en av dem er betingelsene, det vil si at vi kan plassere ett eller annet element i etikettene våre HTML tar hensyn til de forskjellige egenskapene til modellen vår. La oss se følgende kode der vi bruker et eksempel på denne stilen:

 Betinget databinding 
 

I modellvisningen vår har vi definert et attributt kalt id at vi setter det til 0, deretter i vårt HTML i delen av data bind Vi har definert en ternær operatør, der vi angir at hvis ID for modellvisningen er 0, skrives det ut "Hei", ellers skrives det ut "Farvel".
La oss kjøre eksemplet i nettleseren for å se resultatet:

En interessant øvelse ville være hvis du kan endre ID til en annen verdi for å bekrefte operasjonen, det er derfor vi lar den være en oppgave.
Noe veldig viktig som vi må ta hensyn til er konteksten til elementene våre, dette er fordi Knockout.js bruker en hierarkisk struktur av Far sønn for å håndtere de forskjellige egenskapene vi får fra modellvisningene.
Dette betyr at vi alltid jobber basert på en forelder, og dermed kan vi få tilgang til dets egenskaper, og dermed generere egenskaper til barnet som skiller seg fra andre barn som er på samme nivå, og dermed kunne inkorporere forskjellige verdier.
Siden alt er relativt til konteksten ser vi at vi kunne bruke i de foregående eksemplene data bind tekst uten å måtte angi hvem den tilhører, siden når dette skjer, Knockout.js den antar umiddelbart konteksten til det nåværende barnet. La oss se nedenfor de forskjellige konteksttypene vi kan håndtere i applikasjonen vår:
$ rootDet er hovedkonteksten, det er fra hvor modellbildet vårt stammer. Når det påkalles fra en hvilken som helst del av applikasjonen vår, vil det alltid se etter det mest hierarkiske og høyeste prioritetsforholdet i strukturen vår, det er spesielt for når vi har mange barn og vi vil ha noe fra den eldre forelder.
$ forelderDet fungerer likt $ root, med den forskjellen at det bare refererer til den nærmeste forelder til elementet vårt, så omfanget er begrenset til det, det er mye brukt når vi jobber med sykluser for hver å generere mange barn.
$ foreldreTillegg av flertall til denne konteksten forteller oss at vi bygger en slags arrangement eller matrise som inneholder en indeks for hver av foreldrene til barnet hvor vi kaller det, slik som dette $ foreldre [0] er den nærmeste faren, $ foreldre [1] er forelder til nærmeste forelder og så videre.
$ dataDet gir oss tilgang til dataene i konteksten der vi er plassert, det brukes vanligvis når vi jobber med innhold som er variabler, og vi må få tilgang til modellvisningseigenskapene våre.
$ indeksDet er bare tilgjengelig når vi jobber med sløyfer for hver og det gir oss tilgang til elementets forskjellige posisjoner.
Når vi trenger å iterere over en rekke elementer, er det øyeblikket da vi må bruke løkken for hver, vil dette gå gjennom en matrise eller en liste over elementer, og på denne måten kan vi bygge vår liste i dokumentet HTML.
I det følgende eksemplet skal vi ha en egenskap som kalles bøker i modellvisningen, og deretter skal vi krysse den med en for hver bruker en av kontekstvariablene, i dette tilfellet $ data, la oss se:

 Databinding for hver

Hvis vi ser resultatet av nettleseren, vil vi legge merke til operasjonen som skjer når vi tar hensyn til alle konseptene vi har lært under opplæringen.

Med dette fullfører vi denne opplæringen, vi har lært og hatt en mer grundig kontakt med Knockout.js, er det viktig å forstå på en veldig dyp og solid måte konseptene om hva som er databinding, er allerede måten vi vil bruke dataene, attributtene og egenskapene til modellvisningene våre på. Vi var også i stand til å forstå et veldig viktig konsept som kontekst, nå kan vi forstå hvordan de forskjellige elementene er forskjellige og hvorfor Knockout.js den vet når den skal få noen data fremfor andre, og det er fordi den alltid kjenner konteksten til elementene våre.