Share
La creazione di interfacce utente basate sui dati è uno dei compiti più complessi di uno sviluppatore web. Richiede un'attenta gestione tra l'interfaccia e i suoi dati sottostanti. Ad esempio, considera una semplice interfaccia del carrello degli acquisti per un sito di e-commerce. Quando l'utente elimina un articolo dal carrello acquisti, è necessario rimuovere l'elemento dal set di dati sottostante, rimuovere l'elemento associato dalla pagina HTML del carrello e aggiornare il prezzo totale. Per tutti tranne le applicazioni più banali, capire quali elementi HTML si basano su una particolare parte di dati è uno sforzo incline all'errore.
Figura 1: tracciamento manuale delle dipendenze tra elementi HTML e i relativi dati sottostanti La libreria JavaScript Knockout.js fornisce un modo più semplice per gestire questo tipo di interfacce complesse basate sui dati. Invece di tracciare manualmente quali sezioni della pagina HTML si basano sui dati interessati, Knockout.js consente di creare una connessione diretta tra i dati sottostanti e la sua presentazione. Dopo aver collegato un elemento HTML con un particolare oggetto dati, ci sono eventuali modifiche a quell'oggetto automaticamente riflessa nel DOM.
Figura 2: monitoraggio automatico delle dipendenze tramite Knockout.js Questo ti permette di concentrarti sui dati dietro la tua applicazione. Dopo aver impostato i tuoi modelli HTML, puoi lavorare esclusivamente con oggetti dati JavaScript. Con Knockout.js, tutto ciò che devi fare per rimuovere un oggetto dal carrello è rimuoverlo dall'array JavaScript che rappresenta gli elementi del carrello degli acquisti dell'utente. Gli elementi HTML corrispondenti verranno automaticamente rimossi dalla pagina e il prezzo totale ricalcolato.
In altre parole, Knockout.js ti consente di progettare un display autoaggiornante per i tuoi oggetti JavaScript.
Ma non è tutto ciò che Knockout può fare. Oltre al rilevamento automatico delle dipendenze, offre numerose funzionalità di supporto per il rapido sviluppo di interfacce utente reattive ...
Knockout.js è un dalla parte del cliente libreria scritta interamente in JavaScript. Ciò lo rende compatibile con qualsiasi software sul lato server, da ASP.NET a PHP, Django, Ruby on Rails e persino framework Web personalizzati.
Quando si tratta del front-end, Knockout.js collega il modello di dati sottostante agli elementi HTML aggiungendo un singolo attributo HTML. Ciò significa che può essere integrato in un progetto esistente con modifiche minime al tuo HTML, CSS e altre librerie JavaScript.
Mentre Knockout.js viene fornito con quasi due dozzine di associazioni per definire come vengono visualizzati i dati, potresti comunque trovarti a dover ricorrere a un comportamento specifico dell'applicazione (ad esempio, un widget di valutazione a stelle per le recensioni dei film inviati dall'utente). Fortunatamente, Knockout.js semplifica l'aggiunta dei tuoi binding, offrendoti il controllo completo su come i tuoi dati vengono trasformati in HTML. E poiché questi binding personalizzati sono integrati nel linguaggio dei template di base, è banale riutilizzare i widget in altre parti dell'applicazione.
Figura 3: riutilizzo di un'associazione personalizzata in diversi componenti dell'interfaccia utente Knockout.js include diverse funzioni di utilità, inclusi filtri di array, analisi JSON e persino un metodo generico per mappare i dati dal server a una visualizzazione HTML. Queste utility consentono di trasformare grandi quantità di dati in un'interfaccia utente dinamica con solo poche righe di codice.
Knockout.js è non pensato per essere un sostituto di jQuery, Prototype o MooTools. Non tenta di fornire animazione, gestione di eventi generici o funzionalità AJAX (tuttavia, Knockout.js può analizzare i dati ricevuti da una chiamata AJAX). Knockout.js si concentra esclusivamente sulla progettazione di interfacce utente scalabili basate sui dati: come ottenere i dati sottostanti dipende completamente da te.
Figura 4: Knockout.js che integra uno stack di applicazioni Web completo Questo alto livello di specializzazione rende Knockout.js compatibile con qualsiasi altra tecnologia lato client e lato server, ma significa anche che Knockout.js richiede spesso la collaborazione di un framework JavaScript più completo. In questo senso, Knockout.js è più di un supplemento a uno stack di applicazioni Web tradizionale, piuttosto che a una parte integrante di esso.
Quando sei pronto, passa alla lezione uno!
Questa lezione rappresenta un capitolo da Knockout in modo succinto, un eBook gratuito dal team di Syncfusion.
Accentsconagua