Animarea knockout-ului

Knockout.js este nu o bibliotecă de animație. Toate actualizările automate ale Knockout.js sunt imediat aplicată ori de câte ori se modifică datele subiacente. Pentru a anima oricare dintre modificările sale, trebuie să săpăm în interiorul lui Knockout.js și să creăm manual tranziții animate utilizând un alt cadru JavaScript, cum ar fi jQuery sau MooTools. Această lecție se îmbină cu rutinele de animație ale jQuery, dar conceptele prezentate se aplică și altor biblioteci de animație.

Întoarcerea coșului de cumpărături

Pentru această lecție, vom reveni la o versiune simplificată a exemplului cartului nostru de cumpărături. Creați un nou fișier HTML cu următorul conținut. Nu vom face niciun fel de solicitări AJAX, deci nu ezitați să puneți acest lucru oriunde pe computerul dvs. Cu toate acestea, vom folosi rutinele de animație ale jQuery, așa că asigurați-vă că includeți o legătură cu copia dvs. a bibliotecii jQuery.

        
 
 
 
Produs
 
Preț
 
 
 
 
 
 
 
Elimina
 
 
 
 Adaugă Beer     

Sperăm că totul este revizuit până acum. Avem o matrice observabilă care conține o grămadă de produse, a pentru fiecare legare care afișează fiecare dintre ele și un buton pentru a adăuga mai multe elemente în coșul de cumpărături.

Listează apelurile înapoi

Knockout.js este o bibliotecă puternică de interfață de utilizare pe cont propriu, dar odată ce o combinați cu capabilitățile de animație ale unui cadru precum jQuery sau MooTools, sunteți gata să creați UI-uri uimitoare cu marcare minimă. În primul rând, vom examina listele de animație, iar apoi următoarea secțiune prezintă o modalitate mai generică de a anima componentele de vizualizare.

pentru fiecare legarea are două numere de apel invocate beforeRemove și dupăAdăugați. Aceste funcții sunt executate înainte ca un element să fie eliminat din listă sau după ce a fost adăugat în listă. Acest lucru ne oferă posibilitatea de a anima fiecare element înainte ca Knockout.js să manipuleze DOM. Adăugați apelurile înapoi la element ca acesta:

În loc de o proprietate, noastre pentru fiecare legarea ia un obiect literal ca parametru al acestuia. Parametrul lui date proprietatea indică matricea pe care doriți să o redați, iar proprietățile înainte și dupăAdăugați indică funcțiile de apel invers dorite. Apoi, ar trebui să definim aceste apelări în ShoppingCart ViewModel:

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

showProduct () callback utilizează jQuery pentru a face noi elemente de listă să se estompeze treptat în, și hideProduct () callback-ul le estompează și apoi le elimină din DOM. Ambele funcții iau elementul afectat DOM ca primul lor parametru (în acest caz, este vorba de a element). Afirmațiile condiționale vă asigură că lucrăm cu un element cu drepturi depline și nu cu un simplu nod de text.

Rezultatul final ar trebui să fie lista de elemente care trec fără probleme în și din listă. Desigur, aveți libertatea de a utiliza oricare dintre celelalte tranziții ale jQuery sau de a efectua post-procesarea personalizată în oricare dintre apelurile telefonice.

Vânzări personalizate

pentru fiecare callbacks lucrează excelent pentru animarea listelor, dar, din păcate, alte legări nu oferă această funcție. Deci, dacă vrem să animăm alte părți ale interfeței cu utilizatorul, trebuie să creăm personalizat legături care au animația construită chiar în ele.

Legarea personalizată funcționează la fel ca legările implicite ale Knockout.js. De exemplu, luați în considerare următoarele câmpuri de formular:

 
 
  Necesită instrucțiuni speciale de manipulare 
 
  

Caseta de validare acționează ca o comutare pentru </code>, dar din moment ce folosim <code>vizibil</code> legat, Knockout.js adaugă brusc sau îl elimină din DOM. Pentru a asigura o tranziție lină pentru <code><textarea></code>, vom crea o legare personalizată numită visibleFade:</p> <pre> <textarea data-bind="visibleFade: hasInstructions, value: instructions"></pre> <p>Desigur, acest lucru nu va funcționa până când nu adăugăm legarea personalizată la Knockout.js. Putem face acest lucru prin adăugarea unui obiect care definește legarea <code>ko.bindingHandlers</code> așa cum se arată în următoarea eșantion de cod. Acest lucru se întâmplă de asemenea în cazul în care sunt definite toate legăturile încorporate.</p> <pre> ko.bindingHandlers.visibleFade = init: funcție (element, valueAccessor) var value = valueAccessor (); $ (Elementul) .toggle (valoare ()); , actualizare: funcție (element, valoareAccessor) var value = valueAccessor (); valoare ()? $ (element) .fadeIn (): $ (element) .fadeOut (); </pre> <p> <code>init</code> proprietatea specifică o funcție de a apela când Knockout.js întâlnește întâi legarea. Acest apel de apel trebuie să definească starea inițială a componentei de vizualizare și să efectueze acțiunile de configurare necesare (de exemplu, înregistrarea ascultătorilor de evenimente). Pentru <code>visibleFade</code>, tot ce trebuie să faceți este să arătați sau să ascundeți elementul bazat pe starea modelului ViewModel. Am implementat acest lucru folosind metoda jQuery () switch ().</p> <p> <code>element</code> parametrul este elementul DOM fiind legat și <code>valueAccessor</code> este o funcție care va returna proprietatea ViewModel în cauză. În exemplul nostru, elementul se referă la <textarea>, și valueAccessor () returnează o referință la observabilul hasInstructions.</p> <p> <code>Actualizați</code> proprietatea specifică o funcție care trebuie executată ori de câte ori modificările observabile asociate și apelul nostru de apel utilizează valoarea <code>hasInstructions</code> pentru a trece de la <textarea> în direcția corespunzătoare. Rețineți că trebuie să apelați observabilul pentru a obține valoarea sa actuală (adică valoarea (), nu valoarea). Cu toate acestea, dacă hasInstructions a fost o proprietate JavaScript obișnuită în loc de o observabilă, acest lucru nu ar fi cazul.</p> <hr> <h2>rezumat</h2> <p>În această lecție am descoperit două metode de animare a componentelor de vizualizare Knockout.js. În primul rând, am adăugat metode de apel invers la <code>pentru fiecare</code> legare, care permite delegarea adăugării și eliminării elementelor la o funcție definită de utilizator. Acest lucru ne-a oferit posibilitatea de a integra tranzițiile animate ale jQuery în șablonul Knockout.js. Apoi, am explorat legăturile personalizate ca mijloc de animare a elementelor arbitrare.</p> <p>Această lecție a prezentat un caz comun de utilizare a legărilor personalizate, dar acestea nu se limitează la animarea componentelor UI. Legăturile personalizate pot fi, de asemenea, folosite pentru filtrarea datelor în timp ce sunt colectate, pentru a asculta evenimente personalizate sau pentru a crea widget-uri reutilizabile, cum ar fi grilele și conținutul paginat. Dacă puteți încapsula un comportament într-un <code>init</code> și o funcție de actualizare, o puteți transforma într-o obligație personalizată.</p> <hr> <h2>Concluzie</h2> <blockquote><p>Această serie a acoperit marea majoritate a knockout-ului.</p></blockquote> <p>Knockout.js este o bibliotecă JavaScript pură, care face incredibil de ușor să construiți interfețe dinamice, orientate spre date. Am învățat cum să expunem proprietățile ViewModel folosind observabile, să legăm elementele HTML la acele observabile, să gestionăm intrarea utilizatorilor cu legături interactive, să exportim aceste date într-un script de pe server și să animăm componente cu legături personalizate. Sperăm că sunteți mai mult decât gata să migrați aceste cunoștințe la aplicațiile web din lumea reală.</p> <p>Această serie acoperă marea majoritate a API-ului Knockout.js, dar există încă o serie de nuanțe rămase de descoperit. Aceste subiecte includ: legături personalizate pentru tipurile de date agregate, <code>regulator</code> extender pentru evaluarea asincronă a observabilelor calculate și abonarea manuală la evenimentele observabile. Cu toate acestea, toate acestea sunt subiecte avansate care nu ar trebui să fie necesare pentru aplicația web tipică. Cu toate acestea, Knockout.js oferă o mulțime de oportunități de extensibilitate pentru explorarea dvs..</p> <blockquote><p>Dacă preferați să citiți din nou această sesiune în această carte "> eBook, asigurați-vă că ați verificat site-ul Syncfusion. În plus, acestea oferă o varietate de cărți electronice gratuite, la fel ca aceasta!</p></blockquote> <blockquote><p>Această lecție reprezintă un capitol din <em>Knockout Succinct</em>, o carte electronică gratuită de la echipa de la 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">Cod</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">Animarea Inanimatului Efectuarea vântului în viață</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">Animarea ierbii și a florilor folosind efecte de vopsea în 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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </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="Căutare..."> <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>