Introduzione a Knockout.js
Knockout.js è una libreria javascript opensource, studiata per semplificare la realizzazione di interfacce utente complesse, che prevedono anche l'utilizzo di templates.
Questa libreria consente di implementare, in maniera dichiarativa e con una sintassi minimale, tutto il processo di databinding client-side, tipico di diversi scenari web come ad esempio le Single Page Applications (SPA).
In questo articolo vedremo come utilizzare e beneficiare delle funzionalità di Knockout.js e come questa libreria sia facilmente adottabile all'interno di applicazioni pre-esistenti.
Knockout.js è scaricabile dal sito ufficiale con licenza MIT (questo significa che è liberamente utilizzabile e modificabile a patto di includere la licenza stessa nel software) è composta da "semplice" codice javascript senza alcuna dipendenza rispetto ad altre librerie, nei suoi soli 40KB supporta tutti i principali browser (anche alcuni tra i più datati) e, cosa molto importante, vanta una documentazione molto completa e curata. Inoltre questa libreria è inclusa di default in tutti i templates di ASP.NET in Visual Studio (dalla versione 2010).
Knockout.js prevede l'adozione di un Design Pattern molto familiare per gli sviluppatori WPF e Silverlight: Model-View-ViewModel. Questo è di fatto l'unico prerequisito significativo, in quanto l'utilizzo e l'integrazione di questa libreria è molto semplice ed a basso impatto, ma allo stesso tempo consente di risparmiare molto codice ripetitivo di infrastruttura, consentendoci di concentrarci sullo sviluppo di codice più importante riducendo gli errori.
Il Design Pattern Model-View-ViewModel (MVVM)
Lo scopo di MVVM è gestire ed automatizzare interfacce utente di una certa complessità, ricorrendo ad una scomposizione logica dell'interfaccia stessa in 3 elementi funzionali:
- Model: rappresenta dati e logica di un oggetto che rappresenta una entità, ad esempio i dati di un cliente
- view-Model: è l'interfaccia funzionale (non grafica) che descrive ed implementa tutte le possibili funzionalità di manipolazione del model (ad esempio il metodo aggiungiIndirizzo() in un ipotetico oggetto cliente). Il ViewModel è indipendente dallo stile e dalla modalità di visualizzazione dei dati, in breve non dovrebbe conoscere nè codice HTML nè CSS.
- View: è la rappresentazione grafica dello stato del ViewModel, è l'"interfaccia grafica" con cui l'utente può interagire (ad esempio cliccando su un pulsante "Aggiungi Indirizzo")
Il pattern Model-View-ViewModel (MVVM) è spesso l'unica via sensata, oltrechè moderna, per implementare in maniera efficace interfacce utente per la presentazione e la manipolazione dei dati.
MVVM introduce anche tecniche di command bindng (commanding) che consente un maggior disaccoppiamento e astrazione della logica interattiva dell'interfaccia utente.
Per una esaustiva spiegazione del pattern MVVM si consiglia la lettura di: questo articolo
Databinding con Knockout.js
Per iniziare ad apprezzare le funzionalità di questa libreria, è sufficiente inserire una reference alla stessa (disponibile anche via Content Delivery Network).
Nello script che segue, viene illustrato il funzionamento del binding dichiarativo di knockout.js, per associare alla proprietà text di un oggetto span ad una proprietà di un oggetto JavaScript, ricorrendo ad un data attribute (data-bind) in cui viene dichiarata l'espressione di binding.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<meta charset=utf-8 />
<title>Knockout.js intro</title>
</head>
<body>
<h2>Benvenuto <span data-bind="text: firstName"></span></h2>
<span>Nome:</span><input type="text" data-bind="value: firstName"/>
<script type="text/JavaScript">
var viewModel{
firstName: ko.observable('Andrea')
}
ko.applyBindings();
</script>
Commentiamo le istruzioni contenute nello script precedente: nel data attribute, come detto, viene specificata l'espressione di databinding, mentre la proprietà dell'oggetto JavaScript ViewModel è una observable property ovvero una proprietà di cui è possibile sottoscrivere e ricevere le notifiche al variare del valore della stessa.
E' possibile sottoscrivere anche esplicitamente le notifiche, ricorrendo all'istruzione di seguito riportata:
Javascript
//Sottoscrivo e gestisco la proprietà firstName
viewModel.firstName.subscribe(function(newValue) {
alert("Il nome è cambiato: " + newValue);
});
Con l'istruzione ko.applyBindings(), attiviamo la libreria che processa il DOM attivando tutte le sue funzionalità. I parametri del metodo applyBindings sono opzionali e sono:
- Il nome dell'oggetto che fungerà da ViewModel
- La porzione di DOM interessata dal databinding, qualora si desideri una maggiore granularità.
Oltre alle normali proprietà observable, questa libreria offre la possibilità di specificare delle proprietà calcolate e sempre con supporto alle notifiche dei cambiamenti.
Per definire una proprietà calcolata, in grado di sincronizzarsi e ricalcolarsi al variare di alcune proprietà è sufficiente ricorrere a ko.computed come di seguito illustrato
Javascript
function viewModel() {
var self = this;
self.firstName = ko.observable('Andrea');
self.lastName = ko.observable('Colaci');
self.fullName = ko.computed(function() {
return self.firstName() + " " + self.lastName();
});
};
Abbiamo appena visto come sia semplice, grazie agli observables, gestire il tracking delle proprietà di un singolo oggetto, è altrettanto semplice gestire anche collezioni di oggetti. Uno dei problemi più diffusi, da affrontare durante il rendering di una collezione è la variazione puntuale di uno o più elementi, senza ricorrere ad un "refresh" dell'intera collezione, mossa che potrebbe certamente peggiorare le prestazioni.
Grazie ad observableArray, questo problema è facilmente risolto, in quanto il change tracking viene supportato a livello di singolo elemento, consentendo ad esempio di aggiungere, modificare ed eliminare programmaticamente elementi della lista, senza preoccuparsi di scrivere il codice per gestirne l'aggiornamento (refresh)
Javascript
function viewModel() {
var self = this;
self.firstName = ko.observable('Andrea');
self.lastName = ko.observable('Colaci');
self.fullName = ko.computed(function() {
return self.firstName() + " " + self.lastName();
});
self.address = ko.observableArray([
{ name: 'Casa', address : 'piazzale Loreto, 5', city:'Milano' , selected:false},
{ name: 'Fatturazione', address : 'corso Buenos Aires, 145', city:'Milano', selected:false},
{ name: 'Spedizione', address : 'viale Amendola, 10', city:'Milano', selected:true}]);
};
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Triggerare una pipeline su un altro repository di Azure DevOps
Aggiungere interattività lato server in Blazor 8
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Potenziare Azure AI Search con la ricerca vettoriale
Creazione di componenti personalizzati in React.js con Tailwind CSS
Utilizzare un service principal per accedere a Azure Container Registry
Utilizzare Model as a Service su Microsoft Azure
Recuperare l'ultima versione di una release di GitHub
Utilizzare politiche di resiliency con Azure Container App
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
In evidenza
- Il meglio della settimana
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub