Animazione del Knockout

Knockout.js è non una libreria di animazione. Tutti gli aggiornamenti automatici di Knockout.js sono subito applicato ogni volta che i dati sottostanti cambiano. Per animare una delle sue modifiche, dobbiamo scavare nelle parti interne di Knockout.js e creare manualmente transizioni animate usando un altro framework JavaScript come jQuery o MooTools. Questa lezione si attacca alle routine di animazione di jQuery, ma i concetti presentati si applicano anche ad altre librerie di animazioni.

Ritorno del carrello

Per questa lezione, torneremo a una versione semplificata del nostro esempio del carrello. Crea un nuovo file HTML con i seguenti contenuti. Non faremo richieste AJAX, quindi sentiti libero di metterlo ovunque sul tuo computer. Tuttavia, utilizzeremo le routine di animazione di jQuery, quindi assicurati di includere un link alla tua copia della libreria jQuery.

        
 
 
 
Prodotto
 
Prezzo
 
 
 
 
 
 
 
Rimuovere
 
 
 
 Aggiungi birra     

Si spera, questa è tutta la recensione ormai. Abbiamo una matrice osservabile contenente un mucchio di prodotti, a per ciascuno associazione che visualizza ciascuno di essi e un pulsante per aggiungere più oggetti al carrello.

Elenco di callback

Knockout.js è una potente libreria dell'interfaccia utente, ma una volta combinata con le funzionalità di animazione di un framework come jQuery o MooTools, sei pronto per creare interfacce utente davvero sbalorditive con un markup minimo. Per prima cosa, daremo un'occhiata agli elenchi di animazioni, quindi la sezione successiva presenta un modo più generico per animare i componenti della vista.

Il per ciascuno l'associazione ha due callback nominati beforeRemove e dopo Aggiungi. Queste funzioni vengono eseguite prima che un elemento venga rimosso dall'elenco o dopo che sia stato aggiunto all'elenco, rispettivamente. Questo ci dà l'opportunità di animare ogni oggetto prima che Knockout.js manipoli il DOM. Aggiungi i callback al elemento così:

Invece di una proprietà, la nostra per ciascuno il binding ora prende come oggetto un oggetto letterale. Il parametro dati la proprietà punta alla matrice che si desidera eseguire il rendering e le proprietà beforeRemove e afterAdd puntano alle funzioni di callback desiderate. Successivamente, dovremmo definire questi callback sul ViewModel ShoppingCart:

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

Il showProduct () callback usa jQuery per far sbiadire gradualmente i nuovi elementi della lista e hideProduct () la richiamata li sbiadisce e quindi li rimuove dal DOM. Entrambe le funzioni considerano l'elemento DOM interessato come il loro primo parametro (in questo caso, è a elemento). Le istruzioni condizionali assicurano che stiamo lavorando con un elemento a tutti gli effetti e non con un semplice nodo di testo.

Il risultato finale dovrebbe essere un elenco di voci che passino gradualmente all'interno e all'esterno dell'elenco. Naturalmente, sei libero di utilizzare qualsiasi altra transizione di jQuery o eseguire una post-elaborazione personalizzata in uno dei due callback.

Binding personalizzati

Il per ciascuno i callback funzionano bene per animare le liste, ma sfortunatamente altri binding non forniscono questa funzionalità. Quindi, se vogliamo animare altre parti dell'interfaccia utente, dobbiamo creare costume binding che hanno l'animazione costruita direttamente su di loro.

I binding personalizzati funzionano come i collegamenti predefiniti di Knockout.js. Ad esempio, considera i seguenti campi modulo:

 
 
  Richiede istruzioni speciali per la movimentazione 
 
  

La casella di controllo funge da interruttore per </code>, ma dal momento che stiamo usando il <code>visibile</code> vincolante, Knockout.js lo aggiunge o rimuove bruscamente dal DOM. Per fornire una transizione graduale per il <code><textarea></code>, creeremo un binding personalizzato chiamato visibleFade:</p> <pre> <textarea data-bind="visibleFade: hasInstructions, value: instructions"></pre> <p>Ovviamente, questo non funzionerà finché non aggiungiamo il binding personalizzato a Knockout.js. Possiamo farlo aggiungendo un oggetto che definisce il binding a <code>ko.bindingHandlers</code> come mostrato nel seguente codice di esempio. Questo è anche il caso in cui sono definiti anche tutti i binding integrati.</p> <pre> ko.bindingHandlers.visibleFade = init: function (element, valueAccessor) var value = valueAccessor (); $ (Elemento) .toggle (valore ()); , update: function (element, valueAccessor) var value = valueAccessor (); valore ()? $ (elemento) .fadeIn (): $ (elemento) .fadeOut (); </pre> <p>Il <code>dentro</code> proprietà specifica una funzione da chiamare quando Knockout.js incontra per la prima volta l'associazione. Questa callback dovrebbe definire lo stato iniziale per il componente di visualizzazione ed eseguire le necessarie azioni di impostazione (ad es., Registrazione dei listener di eventi). Per <code>visibleFade</code>, tutto ciò che dobbiamo fare è mostrare o nascondere l'elemento in base allo stato di ViewModel. Lo abbiamo implementato usando il metodo toggle () di jQuery.</p> <p>Il <code>elemento</code> parametro è associato all'elemento DOM, e <code>valueAccessor</code> è una funzione che restituirà la proprietà ViewModel in questione. Nel nostro esempio, l'elemento si riferisce a <textarea>, e valueAccessor () restituisce un riferimento all'osservabile hasInstructions.</p> <p>Il <code>aggiornare</code> proprietà specifica una funzione da eseguire ogni volta che le modifiche osservabili associate e la nostra callback utilizza il valore di <code>hasInstructions</code> per passare il <textarea> nella direzione appropriata. Ricorda che devi chiamare l'osservabile per ottenere il suo valore corrente (cioè valore (), non valore). Tuttavia, se hasInstructions fosse una proprietà JavaScript normale anziché osservabile, non sarebbe il caso.</p> <hr> <h2>Sommario</h2> <p>In questa lezione, abbiamo scoperto due metodi per animare i componenti della vista Knockout.js. Innanzitutto, abbiamo aggiunto i metodi di callback a <code>per ciascuno</code> vincolante, che ci consente di delegare l'aggiunta e la rimozione di elementi a una funzione definita dall'utente. Questo ci ha dato l'opportunità di integrare le transizioni animate di jQuery nel nostro modello Knockout.js. Quindi, abbiamo esplorato i binding personalizzati come mezzo per animare elementi arbitrari.</p> <p>Questa lezione ha presentato un caso di utilizzo comune per i binding personalizzati, ma non si limita affatto all'animazione dei componenti dell'interfaccia utente. I binding personalizzati possono anche essere utilizzati per filtrare i dati mentre vengono raccolti, ascoltare eventi personalizzati o creare widget riutilizzabili come griglie e contenuti paginati. Se riesci a incapsulare un comportamento in un <code>dentro</code> e una funzione di aggiornamento, puoi trasformarla in un'associazione personalizzata.</p> <hr> <h2>Conclusione</h2> <blockquote><p>Questa serie copriva la stragrande maggioranza del Knockout.</p></blockquote> <p>Knockout.js è una pura libreria JavaScript che rende incredibilmente facile costruire interfacce utente dinamiche e incentrate sui dati. Abbiamo appreso come esporre le proprietà ViewModel utilizzando osservabili, associare elementi HTML a tali osservabili, gestire l'input dell'utente con associazioni interattive, esportare tali dati in uno script sul lato server e animare i componenti con associazioni personalizzate. Si spera che tu sia più che pronto a migrare questa conoscenza alle tue applicazioni web reali.</p> <p>Questa serie copriva la maggior parte dell'API Knockout.js, ma ci sono ancora alcune sfumature da scoprire. Questi argomenti includono: collegamenti personalizzati per tipi di dati aggregati, il <code>valvola a farfalla</code> estensore per la valutazione asincrona degli osservabili calcolati e iscrizione manuale agli eventi osservabili. Tuttavia, tutti questi sono argomenti avanzati che non dovrebbero essere necessari per la tipica applicazione web. Nondimeno, Knockout.js offre una pletora di opportunità di estensibilità da esplorare.</p> <blockquote><p>Se preferisci rileggere questa sessione in questo libro "> modulo eBook, assicurati di visitare il sito Web di Syncfusion. Inoltre, offrono una varietà di eBook gratuiti, proprio come questo!</p></blockquote> <blockquote><p>Questa lezione rappresenta un capitolo da <em>Knockout in modo succinto</em>, un eBook gratuito dal team di 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">Codice</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">Animare l'inanimato fare vento venire vivo</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">Animazione di erba e fiori con effetti di pittura in 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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da 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="Ricerca..."> <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>