Conceptueel overzicht

Knockout.js gebruikt een Model-View-ViewModel (MVVM) ontwerppatroon, dat een variant is van het klassieke Model-View-Controller (MVC) patroon. Zoals in het MVC-patroon, de model- zijn uw opgeslagen gegevens en de uitzicht is de visuele weergave van die gegevens. Maar in plaats van een controller gebruikt Knockout.js een ViewModel als tussenpersoon tussen het model en het uitzicht.

Het ViewModel is een JavaScript-weergave van de modelgegevens, samen met bijbehorende functies voor het manipuleren van de gegevens. Knockout.js creëert een directe verbinding tussen het ViewModel en de weergave, waarmee het wijzigingen in de onderliggende gegevens kan detecteren en de relevante aspecten van de gebruikersinterface automatisch kan bijwerken..

Figuur 5: Het ontwerppatroon Model-View-ViewModel

De MVVM-componenten van ons winkelwagenvoorbeeld zijn als volgt opgelijst:

Model: De inhoud van het winkelwagentje van een gebruiker opgeslagen in een database, cookie of een andere permanente opslag. Knockout.js maakt zich niets uit van hoe uw gegevens worden opgeslagen. Het is aan u om te communiceren tussen uw modelopslag en Knockout.js. Doorgaans zult u uw modelgegevens opslaan en laden via een AJAX-oproep.
Uitzicht: De HTML / CSS-winkelwagentjepagina die aan de gebruiker wordt weergegeven. Nadat de view is verbonden met het ViewModel, worden automatisch nieuwe, verwijderde en bijgewerkte items weergegeven wanneer het ViewModel verandert.
ViewModel: Een pure-JavaScript-object dat het winkelwagentje vertegenwoordigt, inclusief een lijst met items en opslag- / laadmethoden voor interactie met het model. Nadat u uw HTML-weergave hebt gekoppeld aan het ViewModel, hoeft uw toepassing zich alleen zorgen te maken over het manipuleren van dit object (Knockout.js zorgt voor de weergave).

observabelen

Knockout.js gebruikt observabelen om de eigenschappen van een ViewModel te volgen. Conceptueel werken waarneembare net zoals normale JavaScript-variabelen, maar laten ze Knockout.js waarnemen hun wijzigingen en update automatisch de relevante delen van de weergave.

Figuur 6: Observables gebruiken om ViewModel-eigenschappen bloot te leggen

Bindingen

Alleen waarneembare items blootstellen de eigenschappen van een ViewModel. Om een gebruikersinterfacecomponent in de weergave te verbinden met een bepaalde waarneembare, moet dat binden een HTML-element erin. Nadat een element aan een waarneembaar element is gekoppeld, is Knockout.js klaar om automatisch wijzigingen in het ViewModel weer te geven.

Figuur 7: Een gebruikersinterfacecomponent binden aan een waarneembare eigenschap

Knockout.js bevat verschillende ingebouwde koppelingen die bepalen hoe het waarneembare in de gebruikersinterface wordt weergegeven. Het meest gebruikelijke type binding is om eenvoudig de waarde van de waargenomen eigenschap weer te geven, maar het is ook mogelijk om het uiterlijk ervan onder bepaalde voorwaarden te wijzigen of om een methode van het ViewModel aan te roepen wanneer de gebruiker op het element klikt. Al deze use-cases worden tijdens de volgende lessen behandeld.

Samenvatting

Het ontwerppatroon van Model-View-ViewModel, observabelen en bindingen vormen de basis voor de Knockout.js-bibliotheek. Zodra je deze concepten begrijpt, is het leren van Knockout.js eenvoudig een kwestie van uitzoeken hoe je waarnemingen kunt benaderen en manipuleren via de verschillende ingebouwde bindingen. In de volgende les zullen we onze eerste concrete blik op deze concepten leggen door een eenvoudige "Hello, World!" -Toepassing te bouwen.

Deze les vertegenwoordigt een hoofdstuk van Knockout bondig, een gratis eBoek van het team van Syncfusion.

Code