Innehållsförteckning
Databinding det är inget annat än föreningen av dynamiska data, vare sig text eller HTML i de olika delarna av trädet SOL av vårt dokument där vi har Knockout.js som fungerar, tillåter detta oss att generera dynamiskt innehåll från vyer och modeller.Detta koncept finns i ett stort antal utvecklingsramar för JavaScript eftersom det är ett mycket effektivt sätt att uttrycka utvecklingslogiken, så är det mycket viktigt att vi förstår hur det fungerar och hur det kan göra våra liv enklare när vi gör våra applikationer.
KravHuvudkravet är att kunna utföra Knockout.js oavsett om vi har laddat ner det eller inkluderat det från en CDN. Vi kommer också att behöva en stilserver Apache för att betjäna vår sida och en textredigerare som Sublim text eller NotePad ++ för att skapa de dokument som våra applikationer kommer att bära.
Det bästa sättet att se Databinding är med ett exempel, låt oss se i följande kod hur vi har skapat ett dokument HTML där vi inkluderar Knockout.js, sedan i vår kropp har vi skapat en etikett H1 i den gör vi en databindning av HTML, betyder det att den väntar på HTML -kod.
I delen JavaScript helt enkelt det vi gjorde var att skapa en visa-modell och i det definiera några attribut för att kunna arbeta med det. Det intressanta är att detta tillåter oss att skicka data från våra visa-modell till en del av HTML -koden. Låt oss se hur vår kod ser ut:
Databinding i knockout.jsNär vi ringer vårt dokument från vår webbläsare får vi följande resultat:
Men inte bara det som tillåter oss är att skriva ut text till användaren, vi kan också införliva CSS, klasser och attribut för våra etiketter HTMLvilket gör att vi kan styra nästan alla aspekter av vår sida utan att behöva ange statiska värden.
Låt oss se i följande exempel hur vi ger en etikett en specialklass HTML, tanken är att vi kan generera dynamiska stilar utan att behöva ingripa när vi har en applikation som söker efter ett teckensnitt RESTENmen för att förenkla i detta fall kommer vi att ladda endast en komponent dynamiskt:
Databinding i knockout.jsVi märker sedan hur vi kan skicka en komponent stil som kommer att definiera textens utseende, vi kan också lägga till en klass och slutligen kallar vi vår text från modellen, vi märker också att vi gör allt detta på samma sätt databinding, skiljer bara de olika elementen med kommatecken.
Om vi kör vårt nya exempel är resultatet i vår webbläsare följande:
FÖRSTORA
Det finns andra funktioner som vi kan använda med databinding, en av dem är villkoren, det vill säga att vi kan placera ett eller annat element inom våra etiketter HTML med hänsyn till de olika egenskaperna hos vår modell. Låt oss se följande kod där vi använder ett exempel på denna stil:
Villkorlig databindningI vår modellvy har vi definierat ett attribut som heter id att vi ställer det till 0, sedan i vårt HTML i avsnittet av data binda Vi har definierat en ternär operatör, där vi specificerar om id för modellvyn är 0, det skriver ut "Hej" annars skriver det ut "Hejdå".
Låt oss köra exemplet i webbläsaren för att se resultatet:
Något mycket viktigt som vi måste ta hänsyn till är sammanhanget med våra element, det beror på Knockout.js använder en hierarkisk struktur av Fader son för att hantera de olika egenskaper som vi får från modellvyerna.
Detta innebär att vi alltid arbetar baserat på en förälder, och därmed kan vi komma åt dess egenskaper och därmed generera egenskaper hos barnet som skiljer sig från andra barn som är på samma nivå, och därmed kunna införliva olika värden.
Eftersom allt är relativt till sammanhanget ser vi att vi kunde använda i de tidigare exemplen data binda text utan att behöva ange vem det tillhör, eftersom när detta händer, Knockout.js det antar omedelbart kontexten för det nuvarande barnet. Låt oss se nedan de olika typerna av kontext som vi kan hantera i vår applikation:
$ rootDet är huvudkontexten, det är varifrån vår modellbild härstammar, när den påkallas från någon del av vår applikation kommer den alltid att leta efter det mest hierarkiska och högsta prioritetsförhållandet i vår struktur, det är speciellt för när vi har många barn och vi vill ha något av den äldre föräldern.
$ förälderDet fungerar ungefär som $ root, med den skillnaden att det bara hänvisar till den närmaste föräldern till vårt element, så dess omfattning är begränsad till det, det används ofta när vi arbetar med cykler för varje att få många barn.
$ föräldrarTillägget av plural till detta sammanhang berättar för oss att vi bygger ett slags arrangemang eller array som innehåller ett index för var och en av barnets föräldrar varifrån vi kallar det, så här $ föräldrar [0] är den närmaste pappan, $ föräldrar [1] är förälder till den närmaste föräldern och så vidare.
$ dataDet tillåter oss att komma åt data i sammanhanget där vi är placerade, det används vanligtvis när vi arbetar med innehåll som är variabler och vi måste komma åt våra modellvyegenskaper.
$ indexDet är endast tillgängligt när vi arbetar med slingor för varje och det tillåter oss att komma åt de olika positionerna för vårt element.
När vi behöver iterera över ett antal element är det ögonblicket då vi måste använda slingan för varje, detta kommer att gå igenom en matris eller en lista med element och på så sätt kan vi bygga vår lista i dokumentet HTML.
I följande exempel kommer vi att ha en egenskap som kallas böcker i vår modellvy och sedan kommer vi att korsa den med en för varje med hjälp av en av sammanhangsvariablerna, i detta fall $ data, låt oss se:
Databindande för varje
