Panoramica concettuale

Knockout.js utilizza un modello di progettazione Model-View-ViewModel (MVVM), che è una variante del modello classico Model-View-Controller (MVC). Come nel modello MVC, il modello sono i tuoi dati memorizzati, e il vista è la rappresentazione visiva di quei dati. Ma, invece di un controller, Knockout.js utilizza a ViewModel come intermediario tra il modello e la vista.

ViewModel è una rappresentazione JavaScript dei dati del modello, insieme alle funzioni associate per la manipolazione dei dati. Knockout.js crea una connessione diretta tra ViewModel e la vista, che è il modo in cui può rilevare le modifiche ai dati sottostanti e aggiornare automaticamente gli aspetti rilevanti dell'interfaccia utente.

Figura 5: modello di progettazione Model-View-ViewModel

I componenti MVVM del nostro esempio del carrello sono elencati come segue:

Modello: Il contenuto del carrello degli acquisti di un utente memorizzato in un database, cookie o altra memoria persistente. Knockout.js non si preoccupa di come vengono archiviati i tuoi dati: tocca a te comunicare tra lo spazio di archiviazione del tuo modello e Knockout.js. In genere, salvi e carichi i dati del modello tramite una chiamata AJAX.
Vista: La pagina del carrello degli acquisti HTML / CSS visualizzata all'utente. Dopo aver collegato la vista a ViewModel, visualizzerà automaticamente elementi nuovi, eliminati e aggiornati quando ViewModel cambia.
ViewModel: Un oggetto puro JavaScript che rappresenta il carrello acquisti, incluso un elenco di elementi e metodi di salvataggio / caricamento per interagire con il modello. Dopo aver collegato la tua vista HTML con ViewModel, l'applicazione deve solo preoccuparsi di manipolare questo oggetto (Knockout.js si occuperà della vista).

osservabili

Knockout.js utilizza osservabili per tracciare le proprietà di ViewModel. Concettualmente, le osservabili agiscono proprio come le normali variabili JavaScript, ma consentono a Knockout.js osservare le loro modifiche e aggiorna automaticamente le parti rilevanti della vista.

Figura 6: utilizzo di osservabili per esporre le proprietà ViewModel

Attacchi

Solo osservabili esporre proprietà di ViewModel. Per connettere un componente dell'interfaccia utente nella vista a un particolare osservabile, è necessario legare un elemento HTML ad esso. Dopo aver vincolato un elemento a un osservabile, Knockout.js è pronto per visualizzare automaticamente le modifiche a ViewModel.

Figura 7: Associazione di un componente dell'interfaccia utente a una proprietà osservabile

Knockout.js include diversi collegamenti incorporati che determinano il modo in cui l'osservabile appare nell'interfaccia utente. Il tipo più comune di associazione è semplicemente visualizzare il valore della proprietà osservata, ma è anche possibile modificarne l'aspetto in determinate condizioni oppure chiamare un metodo di ViewModel quando l'utente fa clic sull'elemento. Tutti questi casi d'uso saranno coperti nelle prossime lezioni.

Sommario

Il modello di progettazione Model View-View-View, i parametri osservabili e le associazioni forniscono le basi per la libreria Knockout.js. Una volta compresi questi concetti, l'apprendimento di Knockout.js consiste semplicemente nel capire come accedere agli osservabili e manipolarli tramite i vari collegamenti incorporati. Nella prossima lezione, daremo il nostro primo sguardo concreto a questi concetti creando una semplice applicazione "Hello, World!".

Questa lezione rappresenta un capitolo da Knockout in modo succinto, un eBook gratuito dal team di Syncfusion.

Codice