Share
Denne leksjonen er utformet for å være en undersøkelse på høyt nivå av Knockout.js hovedkomponenter. Ved å implementere en konkret prøveapplikasjon, ser vi hvordan Knockout's ViewModel, visning, observerbarhet og bindinger samhandler for å skape et dynamisk brukergrensesnitt.
Først skal vi opprette en enkel HTML-side for å holde all vår kode, så skal vi definere et ViewModel-objekt, avsløre noen egenskaper, og til og med legge til en interaktiv binding slik at vi kan reagere på brukerklikk.
Før vi begynner å skrive noen kode, last ned den siste kopien av Knockout.js fra nedlastingssiden på GitHub.com. Som ved denne skrivingen er den nyeste versjonen 2.1.0. Deretter er vi klare til å legge til biblioteket på en HTML-side.
La oss starte med en vanlig HTML-side. I samme mappe som ditt Knockout.js-bibliotek, opprett en ny fil kalt index.html, og legg til følgende. Pass på at du endrer knockout-2.1.0.js til filnavnet på Knockout.js-biblioteket du lastet ned.
Eksempelkode: item1.htm
Hei, Knockout.js
Bills handlekurv
Dette er en grunnleggende HTML 5-nettside som inneholder biblioteket Knockout.js nederst på ; Selv om, som et eksternt skript, kan du inkludere det hvor som helst du vil ha (inne er det andre vanlige alternativet). Style.css stilarket er ikke nødvendig for noen av eksemplene i denne serien, men det vil gjøre dem mye lettere på øynene. Det finnes i vedlegg A, eller lastet ned fra https://bitbucket.org/syncfusion/knockoutjs_succinctly. Hvis du åpner siden i en nettleser, bør du se følgende:
Figur 8: Grunnleggende nettside Siden vi ikke jobber med noen vedvarende data ennå, har vi ikke en modell å jobbe med. I stedet hopper vi rett til ViewModel. Til Leksjon 7 :, bruker vi egentlig et View-ViewModel-mønster.
Figur 9: Fokuser på visningen og ViewModel for tiden Husk, en ViewModel er en ren JavaScript-representasjon av modelldataene dine. For å starte opp, bruker vi bare et innfødt JavaScript-objekt som vår ViewModel. Under
Dette skaper en "person" som heter John Smith, og ko.applyBindings () Metoden forteller Knockout.js å bruke objektet som ViewModel for siden.
Selvfølgelig, hvis du oppdaterer siden, vil den fortsatt vise "Bills handlekurv." For Knockout.js å oppdatere visningen basert på ViewModel, må vi binde et HTML-element til personViewModel gjenstand.
Knockout.js bruker en spesiell data-bind attributt til å binde HTML-elementer til ViewModel. Erstatt regning i
tag med en tom element, som følger:
's handlekurv
Verdien av data-bind-attributtet forteller Knockout.js hva som skal vises i elementet. I dette tilfellet er det tekst bindende forteller Knockout.js for å vise egenskapen FirstName i ViewModel. Nå, når du oppdaterer siden, erstatter Knockout.js innholdet i med personViewModel.firstName. Som et resultat, bør du se "Johns handlekurv" i nettleseren din:
Figur 10: Skjermbilde av vår første bundne visningskomponent På samme måte, hvis du endrer data-bindingsattributtet til tekst: LastName, vil det vise "Smiths handlekurv." Som du kan se, binder et element egentlig bare en HTML-mal for ViewModel.
Så, vi har en ViewModel som kan vises i et HTML-element, men se hva som skjer når vi prøver å endre egenskapen. Etter å ha ringt ko.applyBindings (), tilordne en ny verdi til personViewModel.firstName:
ko.applyBindings (personViewModel); personViewModel.firstName = "Ryan";
Knockout.js vil ikke Oppdater automatisk visningen, og siden vil fortsatt lese "John's Handlekurv." Dette skyldes at vi ikke har utsatt fornavn eiendom til Knockout.js. Eventuelle egenskaper som du vil at Knockout.js skal spore må være observer. Vi kan gjøre våre ViewModels egenskaper observerbare ved å endre personViewModel til følgende:
Accentsconagua
var personViewModel = firstName: ko.observable ("John"), etternavn: ko.observable ("Smith"); I stedet for direkte å tildele verdier til fornavn og etternavn, Vi bruker ko.observable () for å legge til egenskapene til Knockout.js 'automatisk avhengighetssporing. Når vi endrer egenskapen firstName, bør Knockout.js oppdatere HTML-elementet som skal samsvare:
ko.applyBindings (personViewModel); personViewModel.firstName ( "Ryan");
Du har sikkert lagt merke til at observerbarhet faktisk er funksjoner-ikke variabler. For å få verdien av en observerbar, kaller du den uten argumenter, og for å angi verdien, passerer du verdien som et argument. Denne oppførselen er oppsummert som følger:
obj.firstName () i stedet for obj.firstName obj.firstName ( "Mary") i stedet for obj.firstName = "Mary" Tilpasning til disse nye tilbehøret kan være noe motintuitiv for nybegynnere til Knockout.js. Vær veldig forsiktig så du ikke tilfeldigvis tildele en verdi til en observerbar eiendom med = operatør. Dette vil overskrive det observerbare, forårsaker at Knockout.js stopper automatisk oppdatering av visningen.
Våre generiske personViewModel objekt og dets observerbare egenskaper virker helt fint for dette enkle eksempelet, men husk at ViewModels også kan definere metoder for interaksjon med dataene sine. Derfor er ViewModels ofte definert som egendefinerte klasser i stedet for generiske JavaScript-objekter. La oss fortsette og erstatte personViewModel med et brukerdefinert objekt:
funksjon PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); ; ko.applyBindings (new PersonViewModel ()); Dette er den kanoniske måten å definere en ViewModel og aktivere Knockout.js. Nå kan vi legge til en tilpasset metode, slik som:
funksjon PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); this.checkout = function () alert ("Prøver å sjekke ut!"); ; ; Kombinere data og metoder i et enkelt objekt er en av de definerende funksjonene i MVVM-mønsteret. Det gir en intuitiv måte å samhandle med data. For eksempel, når du er klar til å sjekke ut, ring bare Sjekk ut() metode på ViewModel. Knockout.js gir selv bindinger for å gjøre dette direkte fra visningen.
Vårt siste skritt i denne leksjonen er å legge til en kasseknapp for å ringe Sjekk ut() metode vi nettopp har definert. Dette er en veldig kort introduksjon til Knockout.js interaktive bindinger, men det gir noen nyttige funksjoner som vi trenger i neste leksjon. Under
tag, legg til følgende knapp:
I stedet for en tekstbinding som viser verdien av en egenskap, vil klikk bindende kaller en metode når brukeren klikker elementet. I vårt tilfelle kaller det kassen () -metoden til vår ViewModel, og du bør se en varslingsmelding pop opp.
Figur 11: Alert melding opprettet etter å ha klikket på Checkout-knappen Knockout.js fullpakke med interaktive bindinger vil bli dekket i Leksjon 6:.
Denne leksjonen gikk gjennom kjerneaspekter av Knockout.js. Som vi har sett, er det tre trinn for å sette opp et Knockout.js-basert webprogram:
Du kan tenke på bindende visningselementer til observerbare egenskaper som å bygge en HTML-mal for en JavaScript-objekt. Etter at mal er satt opp, kan du helt glemme HTML og fokusere utelukkende på ViewModel-dataene bak applikasjonen. Dette er hele poenget med Knockout.js.
I den neste leksjonen vil vi undersøke den virkelige kraften bak Knockout.js automatisk avhengighetssporing ved å opprette observerbare data som er avhengige av andre egenskaper, samt observerbare arrayer for å holde lister over data.
Denne leksjonen representerer et kapittel fra Knockout Succinctly, en gratis eBok fra teamet på Syncfusion.
