knockout (web framework)

Knockout software
Genere	Libreria software (non in lista)
Sviluppatore	Steve Sanderson
Ultima versione	3.5.1 (5 novembre 2019)
Sistema operativo	Multipiattaforma
Linguaggio	JavaScript
Licenza	licenza MIT (licenza libera)
Sito web	knockoutjs.com/ e knockoutjs.com/

Knockout è una libreria JavaScript che permette la creazione di siti web dotati di una interfaccia utente ricca e dinamica, basata su un sottostante modello di dati. Implementa il Model–view–viewmodel (MVVM), un design pattern che prevede una netta separazione tra dati (Model), interfaccia utente (View) e la modalità con la quale i dati vengono rappresentati (ViewModel).

È un progetto indipendente e open source sviluppato e mantenuto da Steve Sanderson, un dipendente di Microsoft. Come ha detto l'autore, "(Knockout) continuerà esattamente così com'è e si evolverà in qualunque direzione dove io e la sua comunità di utenti desidereremo portarlo" e, ha sottolineato, "non è un prodotto Microsoft".

Download e inclusione nella pagina

La libreria è disponibile al download sia dal sito principale che dai principali package manager per JavaScript, come per esempio npm e NuGet. È inoltre disponibile nei principali CDN.

Per poter usufruire della libreria è sufficiente includerla nella pagina in questo modo:

<script src="knockout-x.y.z.js" type="text/javascript"></script>

dove x.y.z è la versione che si intende utilizzare. In alternativa, Knockout supporta il caricamento asincrono AMD tramite RequireJs.

Dopo aver caricato la libreria sarà possibile riferirsi ad essa attraverso la variabile globale 'ko'.

MVVM

Model

Di solito i dati sono forniti da un server web mediante richieste AJAX, in altri casi potrebbero già essere definiti nel codice JavaScript della pagina oppure inseriti manualmente dall'utente. Indipendentemente dalla loro origine, i dati vengono conservati nella memoria del browser web attraverso le consuete variabili di JavaScript, tipicamente object e array.

var data = {
    firstName: "Mario",
    lastName: "Rossi"
}

View

In Knockout l'interfaccia utente, scritta in HTML, fa uso di una sintassi dichiarativa basata sull'attributo data-bind="...". Come suggerisce il nome, con questo attributo è possibile impostare uno o più binding tra una proprietà dell'elemento HTML (per esempio il testo contenuto o il valore di un suo attributo) e una specifica proprietà del ViewModel.

<p>Nome: <input data-bind="value: firstName" /></p>
<p>Cognome: <input data-bind="value: lastName" /></p>
<p>Nome completo: <span data-bind="text: fullName"></span></p>

ViewModel

Il ViewModel rappresenta l'anello di congiunzione tra il Model e la View. Si tratta di un oggetto JavaScript che mette a disposizione particolari function definite in gergo 'osservabili' (observable).

var vm = function ViewModel(data) {
    this.firstName = ko.observable(data.firstName);
    this.lastName = ko.observable(data.lastName);

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};

var ds = new vm(data);
ko.applyBindings(ds);

Oltre alle proprietà osservabili, che di prassi conservano il nome della proprietà originale del model, Knockout mette a disposizione le proprietà calcolate (computed). Si tratta di funzioni che sono dipendenti da una o più proprietà osservabili e che saranno automaticamente aggiornate ogni qualvolta una qualsiasi delle sue dipendenze cambia di valore.

Con la chiamata del metodo ko.applyBindings(ds) si avvia in modo esplicito il binding, che verrà applicato a tutta la pagina HTML. Il metodo prevede anche un secondo parametro opzionale, che permette di specificare l'elemento della pagina al quale applicare il binding:

ko.applyBindings(ds, document.getElementById('someElementId'));

In questo modo è possibile applicare dei binding indipendenti a differenti parti della pagina.

Bindings

I bindings standard messi a disposizione da Knockout coprono quasi tutti gli ambiti:

• Controllo del testo e dell'apparenza: visible, hidden, text, html, class, css, style, attr.
• Controllo del flusso: foreach, if, ifnot, with, using, let, component.
• Interazione con i campi di un form: click, event, submit, enable, disable, value, textInput, hasFocus, checked, options, selectedOptions, uniqueName.

Inoltre è possibile definire dei binding personalizzati (custom bindings), per sopperire alle eventuali lacune dei binding standard o per incapsulare dei comportamenti sofisticati in una comoda e sintetica voce.

Components

In alcuni siti è necessario utilizzare la medesima porzione di codice HTML in svariate pagine e in certi casi anche più volte nella stessa pagina. Si pensi ad esempio al sistema per aggiungere un prodotto al carrello di un sito e-commerce, composto da una casella di testo dove l'utente digita la quantità e da un pulsante di conferma. Knockout mette a disposizione un metodo per definire dei componenti riutilizzabili, formati da una propria parte visuale (template) ed eventualmente anche da una propria parte logica sottostante (viewModel). In questo esempio si registra il componente 'add-to-cart':

ko.components.register('add-to-cart', {
    viewModel: function(params) {
        // Data
        this.articleId = ko.observable(params.articleId || 0);
        this.quantity = ko.observable(params.quantity || 1);
         
        // Behaviors
        this.add = function() { 
            /* some code here */
            console.log('ArticleId:' + this.articleId() + ', quantity:' + this.quantity() + ' added to cart.');
        }.bind(this);
    },
    template:
        '<input type="text" data-bind="value: quantity" /> \
        <button data-bind="click: add">Add to Cart</button>'
});

Dopo aver registrato un componente, questo potrà essere utilizzato nel codice HTML della pagina attraverso lo speciale binding component:

<span data-bind="component: 'add-to-cart'"></span>
<span data-bind="component: {name: 'add-to-cart', params: { articleId: 123, quantity: 1 } }"></span>

Nell'esempio, la seconda riga mostra la sintassi che permette di passare dei parametri aggiuntivi al componente.

Con l'esecuzione del metodo applyBindings(), Knockout inietta all'interno del tag il codice HTML definito nella proprietà template del componente.

Custom elements

Un componente può essere utilizzato come se si trattasse di un tag HTML personalizzato:

<add-to-cart></add-to-cart>
<add-to-cart params="articleId: 123, quantity: 1"></add-to-cart>

Voci correlate

• JavaScript
• Pattern Model–view–viewmodel
• AJAX - Asynchronous JavaScript and XML

Collegamenti esterni

• Sito ufficiale, su knockoutjs.com.
• Sito ufficiale, su knockoutjs.com.
• Repository sorgenti di Knockout, su github.com.
• Blog di Steve Sanderson, autore di Knockout, su blog.stevensanderson.com.
• Blog di Ryan Niemeyer, autore di varie parti di Knockout, su knockmeout.net.
• Blog di Brian M. Hunt, autore di varie parti di Knockout, su brianmhunt.github.io.