Inhoudsopgave
Dataverbinding het is niets meer dan de vereniging van dynamische gegevens, tekst of HTML in de verschillende delen van de boom ZON van ons document waar we Knockout.js aan het werk hebben, stelt dit ons in staat om dynamische inhoud te genereren uit views en modellen.Dit concept is terug te vinden in een groot aantal ontwikkelingskaders voor JavaScript aangezien het een zeer effectieve manier is om de ontwikkelingslogica uit te drukken, is het van vitaal belang dat we begrijpen hoe het werkt en hoe het ons leven gemakkelijker kan maken bij het maken van onze applicaties.
VereistenDe belangrijkste vereiste is om te kunnen uitvoeren Knockout.js of we het hebben gedownload of opgenomen van a CDN. We hebben ook een stijlserver nodig Apache om onze pagina te dienen, en een teksteditor zoals Sublieme tekst of NotePad ++ om de documenten te maken die onze applicaties zullen bevatten.
De beste manier om de . te zien Dataverbinding is met een voorbeeld, laten we in de volgende code kijken hoe we een document hebben gemaakt HTML waar we opnemen Knockout.js, dan hebben we in ons lichaam een label gemaakt H1 daarin maken we een data-bind van HTML, dit betekent dat het wacht op HTML-code.
In het deel JavaScript gewoon wat we deden was het creëren van een kijkmodel en definieer daarin enkele attributen om ermee te kunnen werken. Het interessante is dat dit ons in staat stelt om de gegevens van onze kijkmodel naar een deel van de HTML. Laten we eens kijken hoe onze code eruit ziet:
Gegevensbinding in knockout.jsWanneer we ons document vanuit onze browser aanroepen, krijgen we het volgende resultaat:
Maar niet alleen wat ons in staat stelt om tekst naar de gebruiker af te drukken, we kunnen ook CSS, klassen en attributen in onze labels opnemen HTML, waardoor we bijna elk aspect van onze pagina kunnen beheren zonder statische waarden in te stellen.
Laten we in het volgende voorbeeld zien hoe we een speciale klasse aan een label geven HTML, het idee is dat we dynamische stijlen kunnen genereren zonder in te grijpen wanneer we een toepassing hebben die een lettertype doorzoekt RUST UIT, maar in dit geval gaan we om het te vereenvoudigen slechts één component dynamisch laden:
Gegevensbinding in knockout.jsWe merken dan hoe we een component kunnen doorgeven stijl die het uiterlijk van de tekst zal bepalen, we kunnen ook een klasse toevoegen en als laatste noemen we onze tekst vanuit het model, we merken ook dat we dit allemaal in hetzelfde doen Dataverbinding, alleen de verschillende elementen scheiden met komma's.
Als we ons nieuwe voorbeeld uitvoeren, is het resultaat in onze browser als volgt:
VERGROTEN
Er zijn andere functies die we kunnen gebruiken met de Dataverbinding, een daarvan zijn de conditionals, dat wil zeggen, we kunnen een of ander element in onze labels plaatsen HTML rekening houdend met de verschillende eigenschappen van ons model. Laten we de volgende code bekijken waarin we een voorbeeld van deze stijl gebruiken:
Voorwaardelijke gegevensbindingIn onze modelweergave hebben we een attribuut met de naam id gedefinieerd dat we op 0 zetten, en vervolgens in onze HTML in de sectie van gegevens binden We hebben een ternaire operator gedefinieerd, waarbij we specificeren dat als de id van het modelaanzicht 0 is, het 'Hallo' wordt afgedrukt, anders wordt 'Tot ziens' afgedrukt.
Laten we het voorbeeld in de browser uitvoeren om het resultaat te zien:
Iets heel belangrijks waarmee we rekening moeten houden, is de context van onze elementen, dit komt omdat Knockout.js maakt gebruik van een hiërarchische structuur van Vader zoon om de verschillende eigenschappen die we krijgen van de modelaanzichten te verwerken.
Dit betekent dat we altijd werken op basis van een ouder, en dus toegang hebben tot zijn eigenschappen, waardoor eigenschappen van het kind worden gegenereerd die verschillen van andere kinderen die zich op hetzelfde niveau bevinden, waardoor we verschillende waarden kunnen opnemen.
Omdat alles relatief is ten opzichte van de context, zien we dat we in de vorige voorbeelden de data bind tekst zonder de noodzaak aan te geven van wie het is, want wanneer dit gebeurt, Knockout.js het neemt onmiddellijk de context van het huidige kind aan. Laten we hieronder de verschillende soorten context bekijken die we in onze applicatie aankunnen:
$ wortelHet is de belangrijkste context, het is waar onze modelweergave vandaan komt, wanneer het wordt aangeroepen vanuit een deel van onze applicatie, zal het altijd zoeken naar de meest hiërarchische en hoogste prioriteitsrelatie in onze structuur, het is speciaal voor wanneer we veel kinderen hebben en we willen iets van de oudere ouder.
$ ouderHet werkt vergelijkbaar met $ wortel, met het verschil dat het alleen verwijst naar de directe ouder van ons element, dus de reikwijdte is daartoe beperkt, het wordt veel gebruikt wanneer we met cycli werken foreach om veel kinderen te krijgen.
$ oudersDe toevoeging van het meervoud aan deze context vertelt ons dat we een soort arrangement of array bouwen die een index bevat voor elk van de ouders van het kind van waar we het noemen, zoals dit $ ouders [0] is de directe vader, $ ouders [1] is de ouder van de directe ouder enzovoort.
$ gegevensHet stelt ons in staat om toegang te krijgen tot de gegevens van de context waarin we zijn gepositioneerd, het wordt over het algemeen gebruikt wanneer we werken met inhoud die variabelen zijn en we moeten toegang krijgen tot onze modelweergave-eigenschappen.
$ indexHet is alleen toegankelijk als we met lussen werken foreach en het geeft ons toegang tot de verschillende posities van ons element.
Wanneer we een aantal elementen moeten herhalen, is dit het moment waarop we de lus moeten gebruiken foreach, dit gaat door een array of een lijst met elementen en op deze manier kunnen we onze lijst in het document bouwen HTML.
In het volgende voorbeeld hebben we een eigenschap met de naam boeken in onze modelweergave en dan gaan we deze doorlopen met een foreach gebruikmakend van een van de contextvariabelen, in dit geval $ gegevens, laten we kijken:
Gegevensbinding foreach
