tutorials

Forstå datainnbinding i Knockout.js

  Publiseringsdato: May/2024
{title}

Datobinding er ikke noe mer enn forening av dynamiske data verken tekst eller HTML i de forskjellige delene av DOM- treet i dokumentet vårt der vi har Knockout.js som arbeider, dette lar oss generere dynamisk innhold fra visninger og modeller.
Dette konseptet finnes i et stort antall utviklingsrammer for JavaScript, fordi det er en veldig effektiv måte å uttrykke utviklingslogikken på, så det er viktig at vi forstår hvordan det fungerer og hvordan det kan gjøre livene våre enklere. Når du lager applikasjonene våre.
krav

Hovedkravet er å kunne kjøre Knockout.js enten vi har lastet ned det eller at vi inkluderer det fra et CDN . Vi vil også trenge en Apache- stil-server for å betjene siden vår, og en tekstredigerer som Sublime Text eller NotePad ++ for å lage dokumentene som vil bære applikasjonene våre.

Et eksempel å starte


Den beste måten å se databindingen på er med et eksempel, la oss se i følgende kode hvordan vi har laget et HTML- dokument der vi inkluderer Knockout.js, så i kroppen vår har vi opprettet en H1- kode i den, og lager en HTML- data-binding, Dette betyr at du venter på HTML-kode.
I JavaScript- delen var det vi gjorde å lage en modellvisning og definere noen attributter for å kunne jobbe med den. Det interessante er at dette gjør at vi kan overføre dataene fra modellvisningen til en del av HTML. La oss se hvordan koden vår ser ut: 
 Data Binding i knockout.js
 funksjon VistaModel () {var self = this; self.name = 'Solvetic'; self.obtenerName = funksjon () {return 'Hei ' + self.name + ' Hvordan har du det?'; }; }; var vistamodel = nytt VistaModel (); ko.applyBindings (VistaModelo);
Ved å ringe dokumentet vårt fra nettleseren vår får vi følgende resultat:

{title}


Her ser vi hvordan vi har bygget en metode som returnerer navnet og litt HTML for å style det, dette gjør at vi har et uendelig utvalg av muligheter, men kanskje det som skiller seg ut er at vi kan bruke en databinding til nesten ethvert element. Så vi kan sende tekst, HTML osv.
Men ikke bare det som lar oss skrive ut tekst til brukeren, vi kan også inkorporere CSS, klasser og attributter til HTML- kodene våre, slik at vi kan kontrollere nesten alle aspekter av siden vår uten å måtte etablere statiske verdier.
La oss se i følgende eksempel hvordan vi gir en spesiell klasse til en HTML- kode, ideen er at vi kan generere dynamiske stiler uten å måtte gripe inn når vi har et program som ser etter i en REST- kilde, men i dette tilfellet for å forenkle vil vi laste Bare en komponent dynamisk: 
 Data Binding i knockout.js
 funksjon VistaModel () {var self = this; self.texto = 'Denne teksten har en stil fra en datainbinding'; }; var vistamodel = nytt VistaModel (); ko.applyBindings (VistaModelo);
Vi la merke til hvordan vi kan passere en stilkomponent som vil definere utseendet på teksten, vi kan også legge til en klasse og til slutt kalle teksten vår fra modellen, vi legger også merke til at alt dette vi gjør i den samme databindingen, bare skiller Ulike elementer med komma.
Hvis vi kjører vårt nye eksempel, er resultatet i nettleseren vår som følger:

{title}


Vær spesielt oppmerksom på HTML- feilsøkingsdelen av nettleseren, her ser vi hvor databindingselementene effektivt ble flyttet til taggen.

Bruksforhold


Det er andre funksjoner som vi kan bruke med datainbinding, en av dem er de betingede, det vil si at vi kan plassere ett eller annet element i HTML- kodene våre under hensyntagen til de forskjellige egenskapene til modellen vår. La oss se på følgende kode der vi bruker et eksempel på denne stilen: 
 Betinget binding av data
funksjon VistaModel () {var self = this; selv.id = 0; }; var vistamodel = nytt VistaModel (); ko.applyBindings (VistaModelo);
I modellvisningen vår har vi definert et attributt kalt id som tilsvarer det 0, deretter i HTML-koden vår i delen av databindingen har vi definert en ternær operatør, der vi spesifiserer om IDen til modellvisningen er 0 skriver ut 'Hei' ellers trykk 'Farvel'.
La oss kjøre eksemplet i nettleseren for å se resultatet:

$config[ads_text5] not found

{title}


En interessant øvelse ville være hvis de kan gjøre endringen av ID-en med en annen verdi for å bekrefte operasjonen, det er grunnen til at vi lar det være lekser.

sammenheng


Noe som er veldig viktig at vi må ta hensyn til er konteksten til elementene våre, dette er fordi Knockout.js bruker en hierarkisk foreldre / barnestruktur for å håndtere de forskjellige egenskapene vi får fra modellvisningene.
Dette betyr at vi alltid jobber på grunnlag av en far, og slik at vi kan få tilgang til egenskapene deres, og dermed generere egenskaper til barnet som skiller seg fra andre barn som er på samme nivå, og dermed kunne innlemme forskjellige verdier.
Siden alt er i forhold til konteksten ser vi at vi var i stand til å bruke data bind teksten i de foregående eksemplene uten å indikere hvem det hører til, siden når dette skjer antar Knockout.js umiddelbart konteksten til det nåværende barnet. La oss se nedenfor de forskjellige typer kontekst som vi kan håndtere i applikasjonen vår:
$ rot

$config[ads_text6] not found

Det er hovedkonteksten, det er der modellbildet vårt stammer, å bli påberopt fra hvilken som helst del av applikasjonen vår vil alltid se etter det mest hierarkiske forholdet og med større forrang i vår struktur, det er spesielt for når vi har mange barn og vi vil ha noe fra den eldste faren.
$ foreldre

Det fungerer på samme måte som $ root, med den forskjellen som bare refererer til den umiddelbare faren til elementet vårt, så omfanget er begrenset til det, det er mye brukt når vi jobber med foreach- sykluser for å generere mange barn.
$ foreldre

Tillegg av flertall til denne konteksten indikerer at vi bygger en slags matrise eller matrise som inneholder en indeks for hver av foreldrene til barnet der vi kaller det, så $ foreldre [0] er den nærmeste faren, $ foreldre [1] Han er far til nærmeste far og så videre.
$ data

Det gir oss tilgang til kontekstdata der vi er plassert, de brukes vanligvis når vi jobber med innhold som er variabelt, og vi trenger tilgang til modellvisningsegenskapene våre.
$ indeks

Det er bare tilgjengelig når vi jobber med foreach- løkker og lar oss få tilgang til de forskjellige posisjonene til elementet vårt.

En foreach-loop


Når vi trenger å iterere over en mengde elementer, er det øyeblikket vi må bruke foreach- loopen, dette vil gå gjennom en matrise eller en liste over elementer, og på denne måten kan vi bygge listen vår i HTML- dokumentet.
I det følgende eksemplet vil vi ha en egenskap som heter bøker i modellvisningen, og deretter vil vi gå gjennom den med en foreach ved å bruke en av kontekstvariablene, i dette tilfellet av $ data, la oss se: 
 Datobindende forskere 
    funksjon VistaModel () {var self = this; self.books = ['bok 1', 'bok 2', 'bok 3', 'bok 4']; }; var vistamodel = nytt VistaModel (); ko.applyBindings (VistaModelo);
    Hvis vi ser resultatet av nettleseren, vil vi legge merke til operasjonen som skjer når vi tar hensyn til alle konseptene som vi har lært under opplæringen.

    {title}


    Med dette avslutter vi denne opplæringen, vi har lært og hatt mer dyptgående kontakt med Knockout.js, det er viktig å forstå veldig dypt og solid konseptene for hva dataanbinding er, det er allerede slik vi vil bruke dataene, attributter og egenskaper for modellvisningene våre. Vi kan også forstå et veldig viktig konsept som kontekst, nå kan vi forstå hvordan forskjellige elementer skiller seg og hvorfor Knockout.js vet når han skal få data om andre, og det er fordi han alltid kjenner sammenhengen til elementene våre.

    Relaterte Artikler Hvordan søke på YouTube: 13 triks for å være ekspert