knockout (web framework)

Da Wikipedia, l'enciclopedia libera.
Jump to navigation Jump to search
Knockout
SviluppatoreSteve Sanderson
Ultima versione3.4.2 (6 marzo 2017)
Sistema operativoMultipiattaforma
LinguaggioJavaScript
GenereLibreria software (non in lista)
Licenzalicenza MIT
(licenza libera)
Sito web

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".[1]

Download e inclusione nella pagina[modifica | modifica wikitesto]

La libreria è disponibile al download sia dal sito principale che dai principali package manager per JavaScript, come per esempio NPM (software) 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[modifica | modifica wikitesto]

Model[modifica | modifica wikitesto]

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[modifica | modifica wikitesto]

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[modifica | modifica wikitesto]

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[modifica | modifica wikitesto]

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

  • Controllo del testo e dell'apparenza: visible, text, html, css, style, attr.
  • Controllo del flusso: foreach, if, ifnot, with, 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[modifica | modifica wikitesto]

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[modifica | modifica wikitesto]

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>

Note[modifica | modifica wikitesto]

  1. ^ Steven Sanderson's blog post 'Hello, Microsoft', blog.stevensanderson.com, 3 novembre 2010. URL consultato il 22 ottobre 2014.

Voci correlate[modifica | modifica wikitesto]

Collegamenti esterni[modifica | modifica wikitesto]

Internet Portale Internet: accedi alle voci di Wikipedia che trattano di internet