Share
Å skape data-drevne brukergrensesnitt er en av de mest komplekse jobbene til en webutvikler. Det krever omhyggelig styring mellom grensesnittet og dets underliggende data. For eksempel, vurder et enkelt handlekurv-grensesnitt for et e-handelsnettsted. Når brukeren sletter et element fra handlekurven, må du fjerne varen fra det underliggende datasettet, fjerne det tilknyttede elementet fra handlekurvenes HTML-side, og oppdatere totalprisen. For alle, men de mest trivielle applikasjonene, å finne ut hvilke HTML-elementer som er avhengige av et bestemt datatykke, er en feilaktig tilbakemelding.
Figur 1: Manuell sporing av avhengigheter mellom HTML-elementer og deres underliggende data Knockout.js JavaScript-biblioteket gir en renere måte å håndtere slike komplekse, data-drevne grensesnitt. I stedet for å manuelt spore hvilke deler av HTML-siden som er avhengige av de berørte dataene, kan du med Knockout.js opprette en direkte forbindelse mellom de underliggende dataene og presentasjonen. Etter å ha koblet et HTML-element med et bestemt dataobjekt, er eventuelle endringer i den objekten automatisk gjenspeiles i DOM.
Figur 2: Automatisk sporing av avhengigheter ved hjelp av Knockout.js Dette lar deg fokusere på dataene bak søknaden din. Etter at du har konfigurert HTML-maler, kan du bare jobbe med JavaScript-dataobjekter. Med Knockout.js er alt du trenger å gjøre for å fjerne et element fra handlekurven, fjernet fra JavaScript-serien som representerer brukerens handlekurv. De tilsvarende HTML-elementene fjernes automatisk fra siden, og den totale prisen beregnes på nytt.
En annen måte, Knockout.js lar deg designe en selvoppdaterende skjerm for JavaScript-objektene dine.
Men det er ikke alt Knockout kan gjøre. I tillegg til automatisk avhengighetssporing, har den flere støttefunksjoner for rask utvikling av lydhør brukergrensesnitt ...
Knockout.js er en klient side bibliotek skrevet helt i JavaScript. Dette gjør den kompatibel med nesten hvilken som helst server-side programvare, fra ASP.NET til PHP, Django, Ruby on Rails, og til og med spesialbygde webrammer.
Når det gjelder fronten, kobler Knockout.js den underliggende datamodellen til HTML-elementer ved å legge til et enkelt HTML-attributt. Dette betyr at det kan integreres i et eksisterende prosjekt med minimal endring i HTML, CSS og andre JavaScript-biblioteker.
Mens Knockout.js sendes med nesten to dusin bindinger for å definere hvordan data vises, kan det hende du fortsatt finner deg behov for en applikasjonsspesifikk oppførsel (for eksempel en stjernevurdering-widget for brukerapporterte filmanmeldelser). Heldigvis gjør Knockout.js det enkelt å legge til egne bindinger, noe som gir deg full kontroll over hvordan dataene dine blir transformert til HTML. Og siden disse tilpassede bindingene er integrert i kjernemaleringsspråket, er det trivielt å gjenbruke widgets i andre deler av søknaden din.
Figur 3: Gjenbruk en tilpasset binding i flere brukergrensesnittkomponenter Knockout.js kommer med flere bruksfunksjoner, inkludert arrayfiltre, JSON-parsing, og til og med en generell måte å kartlegge data fra serveren til en HTML-visning. Disse verktøyene gjør det mulig å slå store mengder data til et dynamisk brukergrensesnitt med bare noen få linjer med kode.
Knockout.js er ikke ment å være en erstatning for jQuery, Prototype eller MooTools. Det forsøker ikke å gi animasjon, generisk hendelseshåndtering eller AJAX-funksjonalitet (men Knockout.js kan analysere dataene mottatt fra et AJAX-anrop). Knockout.js er fokusert utelukkende på utforming av skalerbare, data-drevne brukergrensesnitt - hvordan den underliggende data er oppnådd, er helt opp til deg.
Figur 4: Knockout.js supplerer en full webapplikasjonsstabel Dette høye spesialiseringsnivået gjør Knockout.js kompatibelt med hvilken som helst annen klientside og server-side teknologi, men det betyr også at Knockout.js ofte krever samarbeid med en mer fullverdig JavaScript-rammeverk. I denne forstand er Knockout.js mer av en supplement til en tradisjonell webapplikasjonsstabel, i stedet for en integrert del av den.
Når du er klar, gå videre til leksjon en!
Denne leksjonen representerer et kapittel fra Knockout Succinctly, en gratis eBok fra teamet på Syncfusion.
Accentsconagua