Share
Questa lezione è progettata per essere un sondaggio di alto livello sui componenti principali di Knockout.js. Implementando un'applicazione di esempio concreta, vedremo come ViewModel, view, osservabili e binding di Knockout interagiscono per creare un'interfaccia utente dinamica.
In primo luogo, creeremo una semplice pagina HTML per contenere tutto il nostro codice, quindi definiremo un oggetto ViewModel, esponiamo alcune proprietà e persino aggiungere un'associazione interattiva in modo che possiamo reagire ai clic dell'utente.
Prima di iniziare a scrivere qualsiasi codice, scarica l'ultima copia di Knockout.js dalla pagina dei download su GitHub.com. Al momento della stesura di questo documento, la versione più recente è 2.1.0. Dopodiché, siamo pronti per aggiungere la libreria a una pagina HTML.
Iniziamo con una pagina HTML standard. Nella stessa cartella della libreria Knockout.js, crea un nuovo file chiamato index.html e aggiungi quanto segue. Assicurati di modificare knockout-2.1.0.js con il nome del file della libreria Knockout.js che hai scaricato.
Codice di esempio: item1.htm
Ciao, Knockout.js
Carrello della spesa di Bill
Questa è una pagina web HTML 5 di base che include la libreria Knockout.js nella parte inferiore di ; anche se, come qualsiasi script esterno, puoi includerlo ovunque desideri (all'interno è l'altra opzione comune). Il foglio di stile style.css non è effettivamente necessario per nessuno degli esempi di questa serie, ma renderà molto più facile agli occhi. Può essere trovato nell'appendice A o scaricato da https://bitbucket.org/syncfusion/knockoutjs_succinctly. Se apri la pagina in un browser Web, dovresti vedere quanto segue:
Figura 8: pagina Web di base Dal momento che non stiamo ancora lavorando con dati persistenti, non abbiamo un modello con cui lavorare. Invece salteremo direttamente al ViewModel. Fino alla Lezione 7: stiamo usando solo un modello View-ViewModel.
Figura 9: messa a fuoco sulla vista e ViewModel per il momento Ricorda, un ViewModel è una pura rappresentazione JavaScript dei dati del tuo modello. Per iniziare, utilizzeremo solo un oggetto JavaScript nativo come ViewModel. Sotto il
Questo crea una "persona" di nome John Smith, e il ko.applyBindings () metodo dice a Knockout.js di usare l'oggetto come ViewModel per la pagina.
Ovviamente, se ricarichi la pagina, verrà comunque visualizzato "Carrello della spesa di Bill". Affinché Knockout.js possa aggiornare la vista in base a ViewModel, è necessario legare un elemento HTML per personViewModel oggetto.
Knockout.js utilizza uno speciale Dati-bind attributo per associare elementi HTML a ViewModel. Sostituisci Bill in
tag con un vuoto elemento, come segue:
Carrello della spesa
Il valore dell'attributo data-bind indica a Knockout.js cosa visualizzare nell'elemento. In questo caso, il testo il binding dice a Knockout.js di mostrare la proprietà firstName del ViewModel. Ora, quando ricarichi la pagina, Knockout.js sostituirà il contenuto della pagina con personViewModel.firstName. Di conseguenza, dovresti visualizzare "Carrello di John's" nel browser:
Figura 10: Screenshot del nostro primo componente di visualizzazione associato Allo stesso modo, se si modifica l'attributo data-bind in text: lastName, verrà visualizzato "Carrello di Smith's." Come si può vedere, l'associazione di un elemento è in realtà solo la definizione di un modello HTML per ViewModel.
Quindi, abbiamo un ViewModel che può essere visualizzato in un elemento HTML, ma guarda cosa succede quando proviamo a cambiare la proprietà. Dopo aver chiamato ko.applyBindings (), assegnare un nuovo valore a personViewModel.firstName:
ko.applyBindings (personViewModel); personViewModel.firstName = "Ryan";
Knockout.js non lo farà aggiorna automaticamente la vista e la pagina continua a leggere "Carrello della spesa di John". Questo perché non abbiamo esposto il file nome di battesimo proprietà a Knockout.js. Qualsiasi proprietà che desideri che Knockout.js tenga traccia deve essere osservabile. Possiamo rendere osservabili le proprietà del nostro ViewModel cambiando personViewModel al seguente:
Accentsconagua
var personViewModel = firstName: ko.observable ("John"), lastName: ko.observable ("Smith"); Invece di assegnare direttamente valori a nome di battesimo e cognome, usiamo ko.observable () per aggiungere le proprietà al tracker di dipendenza automatico di Knockout.js. Quando modifichiamo la proprietà firstName, Knockout.js dovrebbe aggiornare l'elemento HTML in modo che corrisponda:
ko.applyBindings (personViewModel); personViewModel.firstName ( "Ryan");
Probabilmente hai notato che gli osservabili sono in realtà delle funzioni, non delle variabili. Per ottenere il valore di un osservabile, lo si chiama senza argomenti e per impostare il valore, si passa il valore come argomento. Questo comportamento è riassunto come segue:
obj.firstName () invece di obj.firstName obj.firstName ( "Maria") invece di obj.firstName = "Mary" L'adattamento a questi nuovi strumenti di accesso può essere alquanto controintuitivo per i principianti a Knockout.js. Fai molta attenzione a non assegnare accidentalmente un valore a una proprietà osservabile con = operatore. Questo sovrascriverà l'osservabile, facendo in modo che Knockout.js smetta di aggiornare automaticamente la vista.
Il nostro generico personViewModel l'oggetto e le sue proprietà osservabili funzionano bene per questo semplice esempio, ma ricorda che ViewModels può anche definire i metodi per interagire con i loro dati. Per questo motivo, ViewModels viene spesso definito come classi personalizzate anziché oggetti JavaScript generici. Andiamo avanti e sostituiamo personViewModel con un oggetto definito dall'utente:
function PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); ; ko.applyBindings (new PersonViewModel ()); Questo è il modo canonico per definire un ViewModel e attivare Knockout.js. Ora, possiamo aggiungere un metodo personalizzato, in questo modo:
function PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); this.checkout = function () alert ("Sto cercando di uscire!"); ; ; La combinazione di dati e metodi in un singolo oggetto è una delle caratteristiche che definiscono il modello MVVM. Fornisce un modo intuitivo per interagire con i dati. Ad esempio, quando sei pronto per il check-out chiama semplicemente il check-out() metodo sul ViewModel. Knockout.js fornisce anche associazioni per farlo direttamente dalla vista.
Il nostro ultimo passaggio in questa lezione sarà aggiungere un pulsante checkout per chiamare il check-out() metodo che abbiamo appena definito. Questa è una breve introduzione ai collegamenti interattivi di Knockout.js, ma fornisce alcune utili funzionalità di cui avremo bisogno nella prossima lezione. Sotto il
tag, aggiungi il seguente pulsante:
Invece di un binding di testo che visualizza il valore di una proprietà, il file clic l'associazione chiama un metodo quando l'utente fa clic sull'elemento. Nel nostro caso, chiama il metodo checkout () del nostro ViewModel e dovresti visualizzare un messaggio di avviso.
Figura 11: messaggio di avviso creato dopo aver fatto clic sul pulsante Checkout La suite completa di collegamenti interattivi di Knockout.js sarà trattata nella Lezione 6:.
Questa lezione ha esaminato gli aspetti principali di Knockout.js. Come abbiamo visto, ci sono tre passaggi per configurare un'applicazione web basata su Knockout.js:
Puoi pensare di legare gli elementi di visualizzazione alle proprietà osservabili come creare un modello HTML per un oggetto JavaScript. Dopo aver impostato il modello, è possibile dimenticare completamente l'HTML e concentrarsi esclusivamente sui dati ViewModel dietro l'applicazione. Questo è l'intero punto di Knockout.js.
Nella prossima lezione, esploreremo il reale potere dietro il tracker di dipendenza automatico di Knockout.js creando osservabili che si basano su altre proprietà, così come array osservabili per contenere elenchi di dati.
Questa lezione rappresenta un capitolo da Knockout in modo succinto, un eBook gratuito dal team di Syncfusion.
