Accentsconagua

Knockout animeren

Code
Share

Knockout.js is niet een animatiebibliotheek. Alle automatische updates van Knockout.js zijn per direct toegepast wanneer de onderliggende gegevens veranderen. Om veranderingen te animeren, moeten we de internals van Knockout.js verkennen en handmatig geanimeerde overgangen maken met een ander JavaScript-framework zoals jQuery of MooTools. Deze les blijft hangen in de animatieroutines van jQuery, maar de gepresenteerde concepten zijn ook van toepassing op andere animatiebibliotheken.

Teruggave van de winkelwagen

Voor deze les keren we terug naar een vereenvoudigde versie van ons winkelwagenvoorbeeld. Maak een nieuw HTML-bestand met de volgende inhoud. We zullen geen AJAX-verzoeken doen, dus voel je vrij om dit overal op je computer te plaatsen. We zullen echter de animatieroutines van jQuery gebruiken, dus zorg ervoor dat u een link opneemt naar uw exemplaar van de jQuery-bibliotheek.

   Knockout.js animeren     
 
 
 Artikel Prijs

Hopelijk is dit nu allemaal een recensie. We hebben een waarneembare array met een reeks producten, een foreach binding die elk ervan weergeeft, en een knop om meer items aan het winkelwagentje toe te voegen.

Callbacks lijst

Knockout.js is een krachtige bibliotheek voor gebruikersinterfaces op zich, maar als je het eenmaal combineert met de animatiemogelijkheden van een framework zoals jQuery of MooTools, ben je klaar om echt verbluffende UI's te maken met minimale markup. Eerst kijken we naar animatielijsten en in de volgende sectie wordt een algemenere manier weergegeven om beeldcomponenten te animeren.

De foreach binding heeft twee callbacks met de naam beforeRemove en na toevoegen. Deze functies worden uitgevoerd voordat een item uit de lijst wordt verwijderd of nadat het aan de lijst is toegevoegd. Dit geeft ons de mogelijkheid om elk item te animeren voordat Knockout.js de DOM manipuleert. Voeg de callbacks toe aan de element zoals zo:

In plaats van een eigendom, onze foreach binding neemt nu een object letterlijk als parameter. De parameter's gegevens eigenschap verwijst naar de array die u wilt renderen en de eigenschappen beforeRemove en afterAdd verwijzen naar de gewenste callback-functies. Vervolgens moeten we deze callbacks definiëren in het ShoppingCart ViewModel:

 this.showProduct = function (element) if (element.nodeType === 1) $ (element) .hide (). fadeIn (); ; this.hideProduct = function (element) if (element.nodeType === 1) $ (element) .fadeOut (function () $ (element) .remove ();); ;

De showProduct () callback gebruikt jQuery om nieuwe lijstitems geleidelijk uit te laten faden, en de hideProduct () callback vervaagt ze en verwijdert ze vervolgens uit de DOM. Beide functies nemen het getroffen DOM-element als hun eerste parameter (in dit geval is het een element). De voorwaardelijke instructies zorgen ervoor dat we werken met een volwaardig element en niet alleen maar een tekstknooppunt.

Het eindresultaat zou lijstitems moeten zijn die vloeiend overgaan in en uit de lijst. Natuurlijk bent u vrij om alle andere overgangen van jQuery te gebruiken of aangepaste nabewerking uit te voeren in een van de callbacks.

Aangepaste bindingen

De foreach callbacks werken prima voor het animeren van lijsten, maar helaas bieden andere bindingen deze functionaliteit niet. Dus, als we andere delen van de gebruikersinterface willen animeren, moeten we creëren gewoonte bindingen waarvan de animatie is ingebouwd.

Aangepaste bindingen werken net zoals de standaard bindingen van Knockout.js. Bekijk bijvoorbeeld de volgende formuliervelden:

 
 
  Vereist speciale gebruiksinstructies

Het selectievakje fungeert als een schakelaar voor de