knockout.js Tutorial
Iniziare con knockout.js
Ricerca…
Osservazioni
Questa sezione fornisce una panoramica di cosa sia knockout.js e del perché uno sviluppatore potrebbe volerlo utilizzare.
Dovrebbe anche menzionare qualsiasi argomento di grandi dimensioni all'interno di knockout.js e collegarsi agli argomenti correlati. Poiché la documentazione di knockout.js è nuova, potrebbe essere necessario creare versioni iniziali di tali argomenti correlati.
Versioni
| Versione | Gli appunti | Data di rilascio |
|---|---|---|
| 3.4.2 | Correzioni di bug | 2017/03/06 |
| 3.4.1 | Correzioni di bug | 2016/11/08 |
| 3.4.0 | 2015/11/17 | |
| 3.3.0 | 2015/02/18 | |
| 3.2.0 | Introdotto il binding dei component | 2014/08/12 |
| 3.1.0 | 2014/05/14 | |
| 3.0.0 | Vedi anche: upgrade (da 2.x) note | 2013/10/25 |
| 2.3.0 | Ultima 2.x release | 2013/07/08 |
| 2.0.0 | 2011-12-21 | |
| 1.2.1 | Ultima versione 1.x. | 2011-05-22 |
| 1.0.0 | 2010-07-05 |
Installazione o configurazione
Knockout è disponibile sulla maggior parte delle piattaforme JavaScript o come script autonomo.
Includi come script
Puoi scaricare lo script dalla sua pagina di download , quindi includerlo nella tua pagina con un script tag standard
<script type='text/javascript' src='knockout-3.4.0.js'></script>
Utilizzando un CDN
Puoi anche includere l'eliminazione diretta da Microsoft CDN o CDNJS
<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
O
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>
Installa da npm
npm install knockout
opzionalmente è possibile aggiungere il parametro --save per mantenerlo nel file package.json
Installa da pergola
bower install knockout
opzionalmente è possibile aggiungere il parametro --save per mantenerlo nel file bower.json
Installa da NuGet
Install-Package knockoutjs
Per iniziare: Hello world!
Creazione di un documento HTML e attivazione di knockout.js
Crea un file HTML e includi knockout.js tramite un tag <script> .
<!DOCTYPE html>
<html>
<head>
<title>Hello world! (knockout.js)</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
</body>
</html>
Aggiungi un secondo tag <script> sotto lo script ad eliminazione diretta. In questo tag script, inizializzeremo un modello di visualizzazione e applicheremo i binding di dati al nostro documento.
<script>
var ViewModel = function() {
this.greeting = ko.observable("Hello");
this.name = ko.observable("World");
this.appHeading = ko.pureComputed(function() {
return this.greeting() + ", " + this.name() + "!";
}, this);
};
var appVM = new ViewModel();
ko.applyBindings(appVM);
</script>
Ora, continua a creare una vista aggiungendo del codice HTML al corpo:
<section>
<h1 data-bind="text: appHeading"></h1>
<p>Greeting: <input data-bind="textInput: greeting" /></p>
<p>Name: <input data-bind="textInput: name" /></p>
</section>
Quando il documento HTML viene aperto e gli script vengono eseguiti, vedrai una pagina che dice Hello, World! . Quando cambi le parole negli elementi <input> , il testo <h1> viene aggiornato automaticamente.
Come funziona il file creato
- Una versione di debug di knockout viene caricata da una fonte esterna (cdnjs)
Codice:
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
- Viene creata un'istanza viewmodel con proprietà osservabili . Ciò significa che knockout è in grado di rilevare le modifiche e aggiornare l'interfaccia utente di conseguenza.
Codice:
var appVM = new ViewModel();
- Knockout controlla il DOM per gli attributi di associazione dei
data-binde aggiorna l'interfaccia utente utilizzando il viewmodel fornito.
Codice:
ko.applyBindings(appVM);
- Quando incontra un binding di
text, knockout usa il valore della proprietà così come è definito nel viewmodel associato per iniettare un nodo di testo:
Codice:
<h1 data-bind="text: appHeading"></h1>
Osservabili calcolati
Le osservabili calcolate sono funzioni che possono "guardare" o "reagire" ad altri osservabili sul modello di vista. L'esempio seguente mostra come visualizzare il numero totale di utenti e l'età media.
Nota: l'esempio seguente può anche fare uso di pureComputed () (introdotto in v3.2.0) poiché la funzione calcola semplicemente qualcosa in base ad altre proprietà del modello di vista e restituisce un valore.
<div>
Total Users: <span data-bind="text: TotalUsers">2</span><br>
Average Age: <span data-bind="text: UsersAverageAge">32</span>
</div>
var viewModel = function() {
var self = this;
this.Users = ko.observableArray([
{ Name: "John Doe", Age: 30 },
{ Name: "Jane Doe", Age: 34 }
]);
this.TotalUsers = ko.computed(function() {
return self.Users().length;
});
this.UsersAverageAge = ko.computed(function() {
var totalAge = 0;
self.Users().forEach(function(user) {
totalAge += user.Age;
});
return totalAge / self.TotalUsers();
});
};
ko.applyBindings(viewModel);