knockout.js Handledning
Komma igång med knockout.js
Sök…
Anmärkningar
Det här avsnittet ger en översikt över vad knockout.js är och varför en utvecklare kanske vill använda den.
Den bör också nämna alla stora ämnen inom knockout.js och länka till relaterade ämnen. Eftersom dokumentationen för knockout.js är ny kan du behöva skapa initialversioner av relaterade ämnen.
versioner
| Version | anteckningar | Utgivningsdatum |
|---|---|---|
| 3.4.2 | Bug fixar | 2017/03/06 |
| 3.4.1 | Bug fixar | 2016/11/08 |
| 3.4.0 | 2015/11/17 | |
| 3.3.0 | 2015/02/18 | |
| 3.2.0 | Introducerad component | 2014/08/12 |
| 3.1.0 | 2014/05/14 | |
| 3.0.0 | Se även: uppgradera (från 2.x) anteckningar | 2013/10/25 |
| 2.3.0 | Senaste 2.x utgåvan | 2013/07/08 |
| 2.0.0 | 2011-12-21 | |
| 1.2.1 | Sista 1.x släppning | 2011-05-22 |
| 1.0.0 | 2010-07-05 |
Installation eller installation
Knockout är tillgängligt på de flesta JavaScript-plattformar, eller som ett fristående skript.
Inkludera som ett manus
Du kan ladda ner skriptet från dess nedladdningssida och sedan inkludera det på din sida med en vanlig script tag
<script type='text/javascript' src='knockout-3.4.0.js'></script>
Med hjälp av ett CDN
Du kan också inkludera knockout från antingen Microsoft CDN eller CDNJS
<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
ELLER
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>
Installera från kl
npm install knockout
valfritt kan du lägga till - --save parametern för att behålla den i din package.json fil
Installera från bower
bower install knockout
valfritt kan du lägga till - --save parametern för att behålla den i din bower.json fil
Installera från NuGet
Install-Package knockoutjs
Komma igång: Hej värld!
Skapa ett HTML-dokument och aktivera knockout.js
Skapa en HTML-fil och inkludera knockout.js via en <script> -tagg.
<!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>
Lägg till en andra <script> -tagg under knockout-skriptet. I den här skripttaggen initierar vi en visningsmodell och tillämpar databindningar i vårt dokument.
<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>
Fortsätt nu skapa en vy genom att lägga till HTML i kroppen:
<section>
<h1 data-bind="text: appHeading"></h1>
<p>Greeting: <input data-bind="textInput: greeting" /></p>
<p>Name: <input data-bind="textInput: name" /></p>
</section>
När HTML-dokumentet öppnas och skripten körs, ser du en sida som säger Hello, World! . När du ändrar orden i <input> -elementen uppdateras texten <h1> automatiskt.
Hur den skapade filen fungerar
- En felsökningsversion av knockout laddas från en extern källa (cdnjs)
Koda:
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
- En visningsmodellinstans skapas som har observerbara egenskaper. Detta innebär att knockout kan upptäcka förändringar och uppdatera användargränssnittet i enlighet därmed.
Koda:
var appVM = new ViewModel();
- Knockout kontrollerar DOM för
data-bindattribut och uppdaterar användargränssnittet med den medföljande visningsmodellen.
Koda:
ko.applyBindings(appVM);
- När den möter en
textanvänder knockout egenskapens värde som det definieras i den bundna visningsmodellen för att injicera en textnod:
Koda:
<h1 data-bind="text: appHeading"></h1>
Beräknade observerbara
Beräknade observerbara är funktioner som kan "titta" eller "reagera" på andra observerbara objekt i visningsmodellen. Följande exempel visar hur du visar det totala antalet användare och medelåldern.
Obs: Exemplet nedan kan också använda pureComputed () (introducerad i v3.2.0) eftersom funktionen helt enkelt beräknar något baserat på andra visningsmodellegenskaper och returnerar ett värde.
<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);