knockout.js Zelfstudie
Aan de slag met knockout.js

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript jQuery twitter-bootstrap TypeScript
Zoeken…


Opmerkingen

Deze sectie geeft een overzicht van wat knockout.js is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen knockout.js vermelden en een link naar de gerelateerde onderwerpen bevatten. Aangezien de documentatie voor knockout.js nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Versie Notes Publicatiedatum
3.4.2 Bugfixes 2017/03/06
3.4.1 Bugfixes 2016/11/08
3.4.0 2015/11/17
3.3.0 2015/02/18
3.2.0 Geïntroduceerd component bindend 2014/08/12
3.1.0 2014/05/14
3.0.0 Zie ook: upgrade (vanaf 2.x) notities 2013/10/25
2.3.0 Laatste 2.x release 2013/07/08
2.0.0 2011-12-21
1.2.1 Laatste 1.x release 2011-05-22
1.0.0 2010-07-05

Installatie of instellingen

Knockout is beschikbaar op de meeste JavaScript-platforms of als een zelfstandig script.

Opnemen als een script

U kunt het script downloaden van de downloadpagina en het vervolgens opnemen in uw pagina met een standaard script tag 

<script type='text/javascript' src='knockout-3.4.0.js'></script>

Een CDN gebruiken

U kunt ook knock-out van Microsoft CDN of CDNJS opnemen 

<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>

OF 

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>

Installeren vanaf npm 

npm install knockout

optioneel kunt u de parameter --save toevoegen om deze in uw package.json bestand te houden

Installeer vanaf prieel 

bower install knockout

Optioneel kunt u de toevoegen --save parameter om het in je houden bower.json bestand

Installeren vanaf NuGet 

Install-Package knockoutjs

Aan de slag: Hallo wereld!

Een HTML-document maken en knockout.js inschakelen

Maak een HTML-bestand en neem knockout.js via een <script> -tag. 

<!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>

Voeg een tweede <script> -tag toe onder het knockout-script. In deze script-tag initialiseren we een weergavemodel en passen we gegevensbindingen toe op ons document. 

<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>

Ga nu verder met het maken van een weergave door wat HTML aan de body toe te voegen: 

<section>
  <h1 data-bind="text: appHeading"></h1>
  <p>Greeting: <input data-bind="textInput: greeting" /></p>
  <p>Name: <input data-bind="textInput: name" /></p>
</section>

Wanneer het HTML-document wordt geopend en de scripts worden uitgevoerd, ziet u een pagina met de tekst Hallo, Wereld! . Wanneer u de woorden in de elementen <input> wijzigt, wordt de tekst <h1> automatisch bijgewerkt.

Hoe het gemaakte bestand werkt

  1. Een foutopsporingsversie van knock-out wordt geladen vanaf een externe bron (cdnjs)

Code: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
  1. Er wordt een viewmodel-instantie gemaakt met waarneembare eigenschappen. Dit betekent dat knock-out in staat is om veranderingen te detecteren en de gebruikersinterface dienovereenkomstig bij te werken.

Code: 

var appVM = new ViewModel();
  1. Knockout controleert de DOM op data-bind en werkt de gebruikersinterface bij met behulp van het meegeleverde viewmodel.

Code: 

ko.applyBindings(appVM);
  1. Als het een tegenkomt text bindend, knock-out maakt gebruik van de waarde van het pand zoals het is gedefinieerd in de gebonden viewmodel om een tekst knooppunt injecteren:

Code: 

<h1 data-bind="text: appHeading"></h1>

Berekende waarnemingen

Berekende observables zijn functies die kunnen "kijken" of "reageren" op andere observables op het viewmodel. Het volgende voorbeeld laat zien hoe u het totale aantal gebruikers en de gemiddelde leeftijd weergeeft.

Opmerking: het onderstaande voorbeeld kan ook gebruik maken van pureComputed () (geïntroduceerd in v3.2.0) omdat de functie eenvoudig iets berekent op basis van andere eigenschappen van het viewmodel en een waarde retourneert. 

<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);


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow