HTML and CSS Reference
In-Depth Information
grafici e ha delle API leggermente più complesse da utilizzare rispetto a quelle di chart.js.
la miglior libreria in circolazione per quanto riguarda semplicità d'uso e ricchezza di fun-
zionalità. Infatti, oltre ai grafici a linee, a barre e a torta, mette a disposizione grafici geo-
grafici, scatter, timeline, gauge e molto altro ancora, tutti ben documentati sul sito. Inoltre,
molte tipologie di grafici sono interattive e animabili, il che rende la libreria un vero gio-
iello. Il tallone di questa libreria consiste nelle performance e nel codice HTML generato,
che a volte ne rende l'utilizzo estremamente complicato anche in scenari molto semplici. Il
nostro consiglio è quello di usare Chart.js laddove possibile e ripiegare su Google Charts
laddove si vogliano utilizzare tipologie di grafici che solo questa supporta.
Con l'introduzione del paradigma AJAX, c'è stato sempre un maggior sviluppo di funzio-
nalità sul client e quindi una sempre maggior necessità di codice JavaScript da scrivere. Per
ridurre la quantità di codice, si possono utilizzare framework che introducono il concetto di
templating
e
binding
. Quello più diffuso e completo è senza dubbio
KnockoutJS
. Questo
framework permette di legare gli oggetti nella pagina con le proprietà di una classe JavaS-
cript (definita ViewModel) e di mantenere i valori aggiornati tra loro. Supponiamo di avere
un campo di testo legato a una proprietà del ViewModel. Tramite KnockoutJS possiamo
modificare la proprietà e far sì che il campo di testo nella pagina sia aggiornato e, vicever-
sa, fare in modo che se l'utente modifichi il campo di testo e il valore della proprietà sia
aggiornato: questo sistema di collegamento tra ViewModel e oggetti nella pagina viene de-
finito binding e il pattern di sviluppo che lo sfrutta viene definito Model-View-ViewModel
(MVVM).
Il primo passo per stabilire il binding consiste nel creare il ViewModel che espone le
proprietà che vogliamo collegare alla UI. In questo caso creiamo una proprietà per il nome
e una per il cognome, più una proprietà calcolata per il nome completo. Il codice della clas-
se è visibile
nell'esempio 11.12
.
Esempio 11.12
function TestViewModel() {
this.firstName = ko.observable("Stefano");
this.lastName = ko.observable("Mostarda");
this.fullName = ko.computed(function() {
