Animerer Knockout

Knockout.js er ikke et animasjonsbibliotek. Alle Knockout.js automatiske oppdateringer er umiddelbart brukes når de underliggende dataene endres. For å animere noen av endringene, må vi grave inn i Knockout.js 'internals og manuelt opprette animerte overganger ved hjelp av et annet JavaScript-rammeverk som jQuery eller MooTools. Denne leksjonen stikker sammen med jQuerys animasjonsrutiner, men de fremlagte konseptene gjelder også for andre animasjonsbiblioteker.

Retur av handlekurven

For denne leksjonen kommer vi tilbake til en forenklet versjon av vår handlevogneksempel. Opprett en ny HTML-fil med følgende innhold. Vi vil ikke gjøre noen AJAX-forespørsler, så vær så snill å sette dette overalt på datamaskinen din. Vi vil imidlertid bruke jQuery's animasjonsrutiner, så vær sikker på å inkludere en kobling til din kopi av jQuery-biblioteket.

        
 
 
 
Produkt
 
Pris
 
 
 
 
 
 
 
Fjerne
 
 
 
 Legg til øl     

Forhåpentligvis er dette hele gjennomgå nå. Vi har et observerbart utvalg som inneholder en rekke produkter, a for hver bindende som viser hver enkelt av dem, og en knapp for å legge til flere varer i handlekurven.

Oppgi tilbakeringinger

Knockout.js er et kraftig brukergrensesnittbibliotek på egenhånd, men når du kombinerer det med animasjonsfunksjonene til et rammeverk som jQuery eller MooTools, er du klar til å lage virkelig fantastiske brukergrensesnitt med minimal oppslag. Først tar vi en titt på animasjonslister, og neste del presenterer en mer generell måte å animere visningskomponenter på.

De for hver bindende har to tilbakekallinger kalt beforeRemove og afterAdd. Disse funksjonene utføres før et element fjernes fra listen, eller etter at det er lagt til i henholdsvis listen. Dette gir oss muligheten til å animere hvert element før Knockout.js manipulerer DOM. Legg tilbakeringingene til element som slik:

I stedet for en eiendom, vår for hver bindende tar nå et objekt bokstavelig som parameter. Parameteren er data Egenskapen peker på matrisen du vil gjengi, og egenskapene beforeRemove and afterAdd peker til de ønskede tilbakeringingsfunksjonene. Deretter skal vi definere disse tilbakekallingene på ShoppingCart ViewModel:

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

De showProduct () tilbakeringing bruker jQuery til å gjøre nye listeposter gradvis fade inn, og hideProduct () tilbakeringing fader dem ut, og fjerner dem fra DOM. Begge funksjonene tar det berørte DOM-elementet som sin første parameter (i dette tilfellet er det a element). De betingede utsagnene sørger for at vi jobber med et fullverdig element og ikke bare en tekstknute.

Sluttresultatet bør være listeposter som jevnt overgår til og ut av listen. Selvfølgelig er du fri til å bruke noen av jQuery's andre overganger eller utføre egendefinert etterbehandling i noen av tilbakekallingene.

Tilpassede bindinger

De for hver tilbakeringinger fungerer bra for animerende lister, men dessverre gir andre bindinger ikke denne funksjonaliteten. Så, hvis vi ønsker å animere andre deler av brukergrensesnittet, må vi lage tilpasset bindinger som har animasjonen bygget rett inn i dem.

Tilpassede bindinger fungerer som Knockout.js standardbindinger. For eksempel, vurder følgende skjemafelter:

 
 
  Krever spesielle håndteringsanvisninger 
 
  

Boksen fungerer som en veksle for </code>, men siden vi bruker <code>synlig</code> bindende, legger Knockout.js bratt til eller fjerner det fra DOM. For å gi en jevn overgang for <code><textarea></code>, vi lager en tilpasset binding som kalles visibleFade:</p> <pre> <textarea data-bind="visibleFade: hasInstructions, value: instructions"></pre> <p>Selvfølgelig vil dette ikke fungere før vi legger til den egendefinerte bindingen til Knockout.js. Vi kan gjøre dette ved å legge til et objekt som definerer bindingen til <code>ko.bindingHandlers</code> som vist i følgende kodeprøve. Dette skjer også hvor alle de innebygde bindingene er definert også.</p> <pre> ko.bindingHandlers.visibleFade = init: funksjon (element, valueAccessor) var value = valueAccessor (); $ (Element) .toggle (verdi ()); , oppdatering: funksjon (element, valueAccessor) var value = valueAccessor (); verdi ()? $ (element) .fadeIn (): $ (element) .fadeOut (); </pre> <p>De <code>i det</code> Egenskapen spesifiserer en funksjon som skal ringes når Knockout.js møter bindingen først. Denne tilbakeringingen skal definere starttilstanden for visningskomponenten og utføre nødvendige oppsetthandlinger (for eksempel registrering av hendelseslyttere). Til <code>visibleFade</code>, alt vi trenger å gjøre er å vise eller skjule elementet basert på tilstanden til ViewModel. Vi implementerte dette ved hjelp av jQuery's toggle () metode.</p> <p>De <code>element</code> parameter er DOM-elementet bundet, og <code>valueAccessor</code> er en funksjon som returnerer egenskapen ViewModel. I vårt eksempel refererer element til <textarea>, og valueAccessor () returnerer en referanse til hasInstructions observerbare.</p> <p>De <code>Oppdater</code> Egenskapen spesifiserer en funksjon som skal utføres når den tilknyttede observerbare endringer, og vår tilbakeringing bruker verdien av <code>hasInstructions</code> å overgå <textarea> i riktig retning. Husk at du må ringe det observerbare for å få sin nåværende verdi (dvs. verdi (), ikke verdi). Men hvis hasInstructions var en vanlig JavaScript-egenskap i stedet for en observerbar, ville dette ikke være tilfelle.</p> <hr> <h2>Sammendrag</h2> <p>I denne leksjonen oppdaget vi to metoder for å animere Knockout.js-visningskomponenter. Først lagde vi tilbakekallingsmetoder til <code>for hver</code> bindende, som lar oss delegere tillegg og fjerning av elementer til en brukerdefinert funksjon. Dette ga oss muligheten til å integrere jQuery's animerte overganger i vår Knockout.js-mal. Deretter undersøkte vi tilpassede bindinger som et middel til å animere vilkårlig elementer.</p> <p>Denne leksjonen presenterte en vanlig brukstilfelle for egendefinerte bindinger, men de er på ingen måte begrenset til animerende brukergrensesnitt. Tilpassede bindinger kan også brukes til å filtrere data etter hvert som det samles inn, lytte etter egendefinerte hendelser, eller lage gjenbrukbare widgets som grids og paged content. Hvis du kan inkapslere en oppførsel til en <code>i det</code> og en oppdateringsfunksjon, kan du gjøre det til en tilpasset binding.</p> <hr> <h2>Konklusjon</h2> <blockquote><p>Denne serien dekket det store flertallet av Knockout.</p></blockquote> <p>Knockout.js er et rent JavaScript-bibliotek som gjør det utrolig enkelt å bygge dynamiske, datasentriske brukergrensesnitt. Vi lærte å eksponere ViewModel-egenskaper ved å bruke observerbare data, binde HTML-elementer til de observerbare dataene, administrere brukerinngang med interaktive bindinger, eksportere dataene til et server-side-skript og animere komponenter med tilpassede bindinger. Forhåpentligvis er du mer enn klar til å migrere denne kunnskapen til dine virkelige webapplikasjoner.</p> <p>Denne serien dekket det store flertallet av Knockout.js API, men det er fortsatt en rekke nyanser igjen for å oppdage. Disse temaene inkluderer: egendefinerte bindinger for aggregerte datatyper, <code>Gasspedal</code> utvider for asynkron evaluering av beregnede observerbare data, og manuelt abonnerer på en observerbar begivenhet. Men alle disse er avanserte emner som ikke burde være nødvendige for den typiske webapplikasjonen. Ikke desto mindre gir Knockout.js en mengde utvidelsesmuligheter for deg å utforske.</p> <blockquote><p>Hvis du foretrekker å lese denne sesjonen i denne boken "> eBok-skjema, må du sjekke ut Syncfusion's nettsted. I tillegg tilbyr de en rekke gratis eBøker, akkurat som denne!</p></blockquote> <blockquote><p>Denne leksjonen representerer et kapittel fra <em>Knockout Succinctly</em>, en gratis eBok fra teamet på 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">Kode</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">Animerer den Inanimate Å lage vind kommer i live</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">Animere Gress og Blomster ved hjelp av Paint Effects i 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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av. </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="Søke..."> <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>