Share
Deze les is bedoeld als een hoogstaand overzicht van de belangrijkste componenten van Knockout.js. Door een concrete voorbeeldtoepassing te implementeren, zullen we zien hoe Knockout's ViewModel, view, observables en bindingen op elkaar inwerken om een dynamische gebruikersinterface te creëren.
Eerst maken we een eenvoudige HTML-pagina om al onze code te bewaren, vervolgens definiëren we een ViewModel-object, stellen we enkele eigenschappen bloot en voegen we zelfs een interactieve binding toe, zodat we kunnen reageren op klikken van gebruikers.
Voordat we beginnen met het schrijven van een code, download je het laatste exemplaar van Knockout.js van de downloadpagina op GitHub.com. Op dit moment is de meest recente versie 2.1.0. Daarna zijn we klaar om de bibliotheek aan een HTML-pagina toe te voegen.
Laten we beginnen met een standaard HTML-pagina. Maak in dezelfde map als uw bibliotheek Knockout.js een nieuw bestand met de naam index.html en voeg het volgende toe. Zorg ervoor dat je knockout-2.1.0.js wijzigt in de bestandsnaam van de Knockout.js-bibliotheek die je hebt gedownload.
Voorbeeldcode: item1.htm
Hallo, Knockout.js
Bill's winkelwagen
Dit is een eenvoudige HTML 5-webpagina met de bibliotheek Knockout.js onderaan ; hoewel, zoals elk extern script, je het overal kunt opnemen waar je maar wilt (binnen is de andere gebruikelijke optie). Het style.css-stylesheet is eigenlijk niet nodig voor een van de voorbeelden in deze serie, maar het maakt ze veel gemakkelijker voor de ogen. Het is te vinden in Bijlage A, of gedownload van https://bitbucket.org/syncfusion/knockoutjs_succinctly. Als u de pagina in een webbrowser opent, ziet u het volgende:
Figuur 8: Basiswebpagina Omdat we nog niet werken met persistente gegevens, hebben we geen model waarmee we kunnen werken. In plaats daarvan gaan we meteen naar het ViewModel. Tot Les 7 :, gebruiken we eigenlijk alleen een View-ViewModel-patroon.
Figuur 9: Voorlopig focussen op het beeld en ViewModel Vergeet niet dat een ViewModel een pure JavaScript-weergave is van uw modelgegevens. Om te beginnen gebruiken we gewoon een native JavaScript-object als ons ViewModel. Onder de
Dit creëert een "persoon" met de naam John Smith, en de ko.applyBindings () methode vertelt Knockout.js om het object te gebruiken als ViewModel voor de pagina.
Als u de pagina opnieuw laadt, wordt uiteraard nog steeds 'Bill's winkelwagen weergegeven'. Voor Knockout.js om de weergave op basis van het ViewModel bij te werken, moeten we binden een HTML-element voor de personViewModel voorwerp.
Knockout.js maakt gebruik van een special data-bind attribuut om HTML-elementen aan het ViewModel te binden. Vervang Bill in de
label met een leeg element, als volgt:
Winkelwagen
De waarde van het kenmerk data-bind vertelt Knockout.js wat in het element moet worden weergegeven. In dit geval, de tekst binding vertelt Knockout.js om de eigenschap firstName van het ViewModel weer te geven. Wanneer u de pagina opnieuw laadt, vervangt Knockout.js de inhoud van de met personViewModel.firstName. Als gevolg hiervan zou u "John's Winkelwagen" in uw browser moeten zien:
Figuur 10: Screenshot van onze eerste gebonden weergavecomponent Evenzo, als u het kenmerk data-bind wijzigt in tekst: lastName, wordt "Smith's Shopping Cart" weergegeven. Zoals u ziet, is het binden van een element eigenlijk alleen maar het definiëren van een HTML-sjabloon voor uw ViewModel..
We hebben dus een ViewModel dat kan worden weergegeven in een HTML-element, maar kijk wat er gebeurt als we de eigenschap proberen te wijzigen. Na het bellen ko.applyBindings (), een nieuwe waarde toewijzen aan personViewModel.firstName:
ko.applyBindings (personViewModel); personViewModel.firstName = "Ryan";
Knockout.js zal niet automatisch de weergave bij te werken en de pagina zal nog steeds "John's winkelwagen" lezen. Dit komt omdat we de Voornaam eigendom van Knockout.js. Alle eigenschappen die u wilt dat Knockout.js bijhoudt, moeten zijn waarneembaar. We kunnen de eigenschappen van onze ViewModel waarneembaar maken door personViewModel te veranderen in het volgende:
Accentsconagua
var personViewModel = firstName: ko.observable ("John"), lastName: ko.observable ("Smith"); In plaats van rechtstreeks waarden toe te wijzen Voornaam en achternaam, we gebruiken ko.observable () om de eigenschappen toe te voegen aan de automatische afhankelijkheidsvolger van Knockout.js. Wanneer we de eigenschap firstName wijzigen, moet Knockout.js het HTML-element bijwerken dat overeenkomt met:
ko.applyBindings (personViewModel); personViewModel.firstName ( "Ryan");
Je hebt waarschijnlijk gemerkt dat waarnemingen eigenlijk functies zijn - geen variabelen. Om de waarde van een waarneembaar te krijgen, noem je het zonder enige argumenten, en om de waarde in te stellen, geef je de waarde door als argument. Dit gedrag is als volgt samengevat:
obj.firstName () in plaats van obj.firstName obj.firstName ( "Mary") in plaats van obj.firstName = "Mary" Aanpassing aan deze nieuwe accessors kan enigszins intuïtief zijn voor beginners tot Knockout.js. Wees zeer voorzichtig en wijs niet per ongeluk een waarde toe aan een waarneembare eigenschap met de = operator. Hierdoor wordt het waarneembare overschreven, waardoor Knockout.js stopt met het automatisch bijwerken van de weergave.
Onze generieke personViewModel object en de waarneembare eigenschappen werken prima voor dit eenvoudige voorbeeld, maar vergeet niet dat ViewModels ook methoden voor de interactie met hun gegevens kan definiëren. Om deze reden worden ViewModels vaak gedefinieerd als aangepaste klassen in plaats van generieke JavaScript-objecten. Laten we het personViewModel vervangen door een door de gebruiker gedefinieerd object:
function PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); ; ko.applyBindings (nieuw PersonViewModel ()); Dit is de canonieke manier om een ViewModel te definiëren en Knockout.js te activeren. Nu kunnen we een aangepaste methode toevoegen, zoals:
function PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); this.checkout = function () alert ("Probeer uit te checken!"); ; ; Het combineren van gegevens en methoden in een enkel object is een van de bepalende kenmerken van het MVVM-patroon. Het biedt een intuïtieve manier om met gegevens te communiceren. Als u bijvoorbeeld klaar bent om uit te checken, belt u gewoon het uitchecken() methode op het ViewModel. Knockout.js biedt zelfs bindingen om dit rechtstreeks vanuit het beeld te doen.
Onze laatste stap in deze les is om een uitcheckknop toe te voegen om het te bellen uitchecken() methode die we zojuist hebben gedefinieerd. Dit is een heel korte introductie tot de interactieve bindingen van Knockout.js, maar het biedt een aantal handige functies die we in de volgende les nodig zullen hebben. Onder de
tag, voeg de volgende knop toe:
In plaats van een tekstbinding die de waarde van een eigenschap weergeeft, de Klik binding roept een methode op wanneer de gebruiker op het element klikt. In ons geval roept het de checkout () -methode van ons ViewModel aan en zou er een waarschuwingsbericht moeten verschijnen.
Figuur 11: Waarschuwingsbericht gemaakt na het klikken op de Checkout-knop De volledige reeks interactieve bindingen van Knockout.js wordt besproken in les 6:.
Deze les liep door de kernaspecten van Knockout.js. Zoals we hebben gezien, zijn er drie stappen om een op Knockout.js gebaseerde webtoepassing in te stellen:
U kunt bindende weergave-elementen zien aan waarneembare eigenschappen als het bouwen van een HTML-sjabloon voor een JavaScript-object. Nadat de sjabloon is ingesteld, kunt u de HTML volledig vergeten en zich alleen richten op de ViewModel-gegevens achter de toepassing. Dit is het hele punt van Knockout.js.
In de volgende les zullen we de echte kracht achter de automatische afhankelijkheidsvolger van Knockout.js verkennen door waarneembare objecten te maken die afhankelijk zijn van andere eigenschappen, evenals waarneembare matrices voor het bijhouden van gegevenslijsten.
Deze les vertegenwoordigt een hoofdstuk van Knockout bondig, een gratis eBoek van het team van Syncfusion.
