Share
Het creëren van datagedreven gebruikersinterfaces is een van de meest complexe taken van een webontwikkelaar. Het vereist een zorgvuldig beheer tussen de interface en de onderliggende gegevens. Overweeg bijvoorbeeld een eenvoudige winkelwagentje interface voor een e-commerce website. Wanneer de gebruiker een item uit het winkelwagentje verwijdert, moet u het item uit de onderliggende dataset verwijderen, het bijbehorende element verwijderen uit de HTML-pagina van het winkelwagentje en de totale prijs bijwerken. Voor alle, behalve de meest triviale toepassingen, is het een foutgevoelige onderneming om uit te vissen welke HTML-elementen afhankelijk zijn van een bepaald gegeven.
Figuur 1: Afhankelijkheden tussen HTML-elementen en hun onderliggende gegevens handmatig bijhouden De JavaScript-bibliotheek Knockout.js biedt een schonere manier om dit soort complexe, gegevensgestuurde interfaces te beheren. In plaats van handmatig bij te houden welke delen van de HTML-pagina afhankelijk zijn van de betreffende gegevens, kunt u met Knockout.js een directe verbinding maken tussen de onderliggende gegevens en de presentatie ervan. Nadat een HTML-element aan een bepaald gegevensobject is gekoppeld, zijn alle wijzigingen in dat object dat wel automatisch weerspiegeld in de DOM.
Figuur 2: Afhankelijkheden automatisch bijhouden met Knockout.js Hiermee kunt u zich concentreren op de gegevens achter uw toepassing. Nadat u uw HTML-sjablonen hebt ingesteld, kunt u uitsluitend werken met JavaScript-gegevensobjecten. Met Knockout.js hoeft u alleen nog maar een item uit de winkelwagen te verwijderen uit de JavaScript-array die de winkelwagen-items van de gebruiker vertegenwoordigt. De bijbehorende HTML-elementen worden automatisch van de pagina verwijderd en de totale prijs opnieuw berekend.
Anders gezegd, met Knockout.js kunt u een zelfbijwerkscherm voor uw JavaScript-objecten ontwerpen.
Maar dat is niet alles wat Knockout kan doen. Naast het automatisch volgen van afhankelijkheden, beschikt het over verschillende ondersteunende functies voor de snelle ontwikkeling van responsieve gebruikersinterfaces ...
Knockout.js is een kant van de cliënt bibliotheek volledig geschreven in JavaScript. Dit maakt het compatibel met vrijwel elke server-side software, van ASP.NET tot PHP, Django, Ruby on Rails en zelfs op maat gemaakte web frameworks.
Als het gaat om de front-end verbindt Knockout.js het onderliggende gegevensmodel met HTML-elementen door een enkel HTML-kenmerk toe te voegen. Dit betekent dat het kan worden geïntegreerd in een bestaand project met minimale wijzigingen in uw HTML-, CSS- en andere JavaScript-bibliotheken.
Hoewel Knockout.js wordt geleverd met bijna twee dozijn bindingen om te definiëren hoe gegevens worden weergegeven, is het mogelijk dat u nog steeds behoefte heeft aan een toepassingsspecifiek gedrag (bijvoorbeeld een widget voor sterrenbeoordelingen voor door gebruikers ingediende filmrecensies). Gelukkig maakt Knockout.js het eenvoudig om je eigen bindingen toe te voegen, waardoor je volledige controle hebt over hoe je gegevens worden omgezet in HTML. En omdat deze aangepaste bindingen zijn geïntegreerd in de taal van de kerntemplate, is het triviaal om widgets in andere delen van uw toepassing opnieuw te gebruiken.
Figuur 3: Hergebruik van een aangepaste binding in verschillende componenten van de gebruikersinterface Knockout.js wordt geleverd met verschillende hulpprogramma-functies, waaronder array-filters, JSON-parsing en zelfs een generieke manier om gegevens van de server naar een HTML-weergave toe te wijzen. Deze hulpprogramma's maken het mogelijk grote hoeveelheden gegevens om te zetten in een dynamische gebruikersinterface met slechts een paar regels code.
Knockout.js is niet bedoeld als vervanging voor jQuery, Prototype of MooTools. Er wordt geen poging gedaan om animatie, generieke gebeurtenisafhandeling of AJAX-functionaliteit te bieden (hoewel Knockout.js dit wel kan ontleden de gegevens ontvangen van een AJAX-oproep). Knockout.js is uitsluitend gericht op het ontwerpen van schaalbare, datagedreven gebruikersinterfaces - hoe die onderliggende gegevens worden verkregen, is geheel aan jou.
Figuur 4: Knockout.js als aanvulling op een volledige webtoepassingsstapel Deze hoge mate van specialisatie maakt Knockout.js compatibel met andere client-side en server-side technologie, maar het betekent ook dat Knockout.js vaak de medewerking vereist van een meer volledig JavaScript-framework. In deze zin is Knockout.js meer een supplement naar een traditionele webtoepassingsstapel, in plaats van een integraal onderdeel ervan.
Als je klaar bent, ga je verder naar les één!
Deze les vertegenwoordigt een hoofdstuk van Knockout bondig, een gratis eBoek van het team van Syncfusion.
Accentsconagua