Animation de KO

Knockout.js est ne pas une bibliothèque d'animation. Toutes les mises à jour automatiques de Knockout.js sont immédiatement appliquée chaque fois que les données sous-jacentes changent. Pour animer ses modifications, nous devons creuser dans les éléments internes de Knockout.js et créer manuellement des transitions animées à l'aide d'un autre framework JavaScript tel que jQuery ou MooTools. Cette leçon est restée fidèle aux routines d’animation de jQuery, mais les concepts présentés s’appliquent également à d’autres bibliothèques d’animation..

Retour du panier

Pour cette leçon, nous allons revenir à une version simplifiée de notre exemple de panier d'achat. Créez un nouveau fichier HTML avec le contenu suivant. Nous ne ferons aucune demande AJAX, alors n'hésitez pas à la placer n'importe où sur votre ordinateur. Cependant, nous utiliserons les routines d’animation de jQuery. Veillez donc à inclure un lien vers votre copie de la bibliothèque jQuery..

        
 
 
 
Produit
 
Prix
 
 
 
 
 
 
 
Retirer
 
 
 
 Ajouter de la bière     

Espérons que tout cela est en revue maintenant. Nous avons un tableau observable contenant un tas de produits, un pour chaque reliure qui affiche chacun d'eux, et un bouton pour ajouter plus d'articles au panier.

Liste des rappels

Knockout.js est une bibliothèque d'interface utilisateur puissante, mais une fois que vous la combinez avec les fonctionnalités d'animation d'un framework tel que jQuery ou MooTools, vous êtes prêt à créer des interfaces utilisateur vraiment époustouflantes avec un minimum de balises. Dans un premier temps, nous examinerons l’animation de listes, puis la section suivante présente un moyen plus générique d’animer des composants de vue..

le pour chaque la liaison a deux callbacks nommés avantRetirer et afterAdd. Ces fonctions sont exécutées avant qu'un élément ne soit supprimé de la liste ou après son ajout à la liste, respectivement. Cela nous donne l’occasion d’animer chaque élément avant que Knockout.js ne manipule le DOM. Ajouter les rappels au élément comme tel:

Au lieu d’une propriété, notre pour chaque La liaison prend maintenant un littéral d'objet en tant que paramètre. Les paramètres Les données property pointe sur le tableau que vous souhaitez afficher et les propriétés beforeRemove et afterAdd pointent sur les fonctions de rappel souhaitées. Ensuite, nous devrions définir ces rappels sur le 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 ();); ;

le showProduct () callback utilise jQuery pour faire en sorte que de nouveaux éléments de la liste s’affichent progressivement. hideProduct () callback les supprime, puis les supprime du DOM. Les deux fonctions prennent l’élément DOM affecté comme premier paramètre (dans ce cas, c’est un élément). Les instructions conditionnelles garantissent que nous travaillons avec un élément à part entière et non un simple nœud de texte.

Le résultat final devrait être des éléments de liste qui effectuent une transition en douceur vers et hors de la liste. Bien sûr, vous êtes libre d'utiliser l'une des autres transitions de jQuery ou d'effectuer un post-traitement personnalisé dans l'un des rappels..

Liaisons personnalisées

le pour chaque Les rappels fonctionnent très bien pour animer des listes, mais malheureusement, d'autres liaisons ne proposent pas cette fonctionnalité. Donc, si nous voulons animer d'autres parties de l'interface utilisateur, nous devons créer Douane les liaisons qui ont l'animation intégrée directement dans eux.

Les liaisons personnalisées fonctionnent comme les liaisons par défaut de Knockout.js. Par exemple, considérons les champs de formulaire suivants:

 
 
  Nécessite des instructions de manipulation spéciales 
 
  

La case à cocher agit comme une bascule pour le </code>, mais puisque nous utilisons le <code>visible</code> binding, Knockout.js l'ajoute ou le supprime soudainement du DOM. Assurer une transition en douceur pour le <code><textarea></code>, nous allons créer une liaison personnalisée appelée visibleFade:</p> <pre> <textarea data-bind="visibleFade: hasInstructions, value: instructions"></pre> <p>Bien sûr, cela ne fonctionnera pas tant que nous n'aurons pas ajouté la liaison personnalisée à Knockout.js. Nous pouvons le faire en ajoutant un objet définissant la liaison à <code>ko.bindingHandlers</code> comme indiqué dans l'exemple de code suivant. Cela se produit également lorsque toutes les liaisons intégrées sont définies..</p> <pre> ko.bindingHandlers.visibleFade = init: function (élément, valueAccessor) var value = valueAccessor (); $ (element) .toggle (value ()); , update: function (element, valueAccessor) var value = valueAccessor (); valeur() ? $ (element) .fadeIn (): $ (element) .fadeOut (); </pre> <p>le <code>init</code> property spécifie une fonction à appeler lorsque Knockout.js rencontre la liaison pour la première fois. Ce rappel doit définir l'état initial du composant vue et effectuer les actions de configuration nécessaires (par exemple, enregistrer des écouteurs d'événements). Pour <code>visibleFade</code>, tout ce que nous avons à faire est d’afficher ou de masquer l’élément en fonction de l’état du ViewModel. Nous avons implémenté cela en utilisant la méthode toggle () de jQuery.</p> <p>le <code>élément</code> paramètre est l'élément DOM lié, et <code>valeurAccesseur</code> est une fonction qui retournera la propriété ViewModel en question. Dans notre exemple, l'élément fait référence à <textarea>, et valueAccessor () renvoie une référence à l'observable hasInstructions.</p> <p>le <code>mettre à jour</code> La propriété spécifie une fonction à exécuter chaque fois que l'observable associé change, et notre rappel utilise la valeur de <code>hasInstructions</code> pour faire la transition <textarea> dans la direction appropriée. N'oubliez pas que vous devez appeler l'observable pour obtenir sa valeur actuelle (c'est-à-dire value (), pas value). Cependant, si hasInstructions était une propriété JavaScript normale au lieu d’un observable, ce ne serait pas le cas..</p> <hr> <h2>Résumé</h2> <p>Dans cette leçon, nous avons découvert deux méthodes d’animation des composants de vue Knockout.js. Premièrement, nous avons ajouté des méthodes de rappel à la <code>pour chaque</code> binding, ce qui nous permet de déléguer l'ajout et la suppression d'éléments à une fonction définie par l'utilisateur. Cela nous a permis d'intégrer les transitions animées de jQuery dans notre modèle Knockout.js. Nous avons ensuite exploré les liaisons personnalisées comme moyen d’animer des éléments arbitraires..</p> <p>Cette leçon présente un cas d'utilisation courant pour les liaisons personnalisées, mais elles ne se limitent en aucun cas à l'animation de composants d'interface utilisateur. Les liaisons personnalisées peuvent également être utilisées pour filtrer les données au fur et à mesure de leur collecte, écouter les événements personnalisés ou créer des widgets réutilisables tels que des grilles et du contenu paginé. Si vous pouvez encapsuler un comportement dans un <code>init</code> et une fonction de mise à jour, vous pouvez le transformer en une liaison personnalisée.</p> <hr> <h2>Conclusion</h2> <blockquote><p>Cette série couvrait la grande majorité des Knockout.</p></blockquote> <p>Knockout.js est une bibliothèque JavaScript pure qui facilite incroyablement la création d'interfaces utilisateur dynamiques et centrées sur les données. Nous avons appris à exposer les propriétés ViewModel à l'aide d'observables, à lier des éléments HTML à ces observables, à gérer les entrées utilisateur à l'aide de liaisons interactives, à exporter ces données vers un script côté serveur et à animer des composants à l'aide de liaisons personnalisées. Espérons que vous êtes plus que prêt à migrer ces connaissances vers vos applications Web réelles..</p> <p>Cette série couvrait la grande majorité de l’API Knockout.js, mais il reste encore un certain nombre de nuances à découvrir. Ces sujets incluent: les liaisons personnalisées pour les types de données agrégées, la <code>étrangler</code> extender pour l'évaluation asynchrone d'observables calculés et pour s'abonner manuellement aux événements d'un observable. Cependant, tous ces sujets avancés ne devraient pas être nécessaires pour une application Web typique. Néanmoins, Knockout.js fournit une pléthore d’opportunités d’extensibilité que vous pouvez explorer..</p> <blockquote><p>Si vous préférez relire cette session dans ce livre "> sous forme de livre électronique, assurez-vous de consulter le site Web de Syncfusion. En outre, ils offrent une variété de livres électroniques gratuits, tout comme celui-ci.!</p></blockquote> <blockquote><p>Cette leçon représente un chapitre de <em>Knockout Succinctly</em>, un eBook gratuit de l'équipe de Syncfusion.</p></blockquote> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Code</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/music/animating-the-inanimate-making-wind-come-alive.html">Animer l'inanimé Faire revivre le vent</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_8/animating-the-inanimate-making-wind-come-alive_7.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/cgi/animating-grass-and-flowers-using-paint-effects-in-maya.html">Animation d'herbe et de fleurs à l'aide d'effets de peinture dans Maya</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_20/animating-grass-and-flowers-using-paint-effects-in-maya_21.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Chercher..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>