knockout.js Tutorial
Erste Schritte mit knockout.js

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


Bemerkungen

In diesem Abschnitt erhalten Sie einen Überblick darüber, was knockout.js ist und warum ein Entwickler sie verwenden möchte.

Es sollte auch alle großen Themen in knockout.js erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für knockout.js neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Versionen

Ausführung Anmerkungen Veröffentlichungsdatum
3.4.2 Fehlerbehebung 2017-03-06
3.4.1 Fehlerbehebung 2016-11-08
3.4.0 2015-11-17
3.3.0 2015-02-18
3.2.0 Eingeführte component 2014-08-12
3.1.0 2014-05-14
3.0.0 Siehe auch: Hinweise zum Upgrade (von 2.x) 2013-10-25
2.3.0 Letzte Version 2.x 2013-07-08
2.0.0 2011-12-21
1.2.1 Letzte Version 1.x 2011-05-22
1.0.0 2010-07-05

Installation oder Setup

Knockout ist auf den meisten JavaScript-Plattformen oder als eigenständiges Skript verfügbar.

Als Skript einbinden

Sie können das Skript von der Downloadseite herunterladen und mit einem Standard- script tag in Ihre Seite aufnehmen 

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

Verwenden eines CDN

Sie können auch die Aussparung aus dem Microsoft CDN oder CDNJS hinzufügen 

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

ODER 

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

Installieren Sie ab npm 

npm install knockout

Optional können Sie den Parameter --save hinzufügen, um ihn in Ihrer package.json Datei zu behalten

Installieren Sie von der Laube 

bower install knockout

optional können Sie die hinzufügen --save Parameter es in Ihrer halten bower.json Datei

Installieren Sie von NuGet 

Install-Package knockoutjs

Erste Schritte: Hallo Welt!

Ein HTML-Dokument erstellen und knockout.js aktivieren

Erstellen Sie eine HTML-Datei und fügen Sie knockout.js über ein <script> -Tag hinzu. 

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

Fügen Sie ein zweites <script> -Tag unter dem Knockout-Skript hinzu. In diesem Skript-Tag initialisieren wir ein Ansichtsmodell und wenden Datenbindungen auf unser Dokument an. 

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

Fahren Sie nun mit dem Erstellen einer Ansicht fort, indem Sie dem Hauptteil HTML hinzufügen: 

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

Wenn das HTML-Dokument geöffnet und die Skripts ausgeführt werden, wird eine Seite mit der Aufschrift Hello, World! Angezeigt. . Wenn Sie die Wörter in den <input> -Elementen ändern, wird der Text <h1> automatisch aktualisiert.

Wie die erstellte Datei funktioniert

  1. Eine Debug-Version von Knockout wird von einer externen Quelle (cdnjs) geladen.

Code: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
  1. Es wird eine Viewmodel-Instanz erstellt, die über beobachtbare Eigenschaften verfügt. Dies bedeutet, dass der Knockout Änderungen erkennen und die Benutzeroberfläche entsprechend aktualisieren kann.

Code: 

var appVM = new ViewModel();
  1. Die Aussparung prüft das DOM auf data-bind und aktualisiert die Benutzeroberfläche mit dem bereitgestellten Viewmodel.

Code: 

ko.applyBindings(appVM);
  1. Wenn es einen antrifft text Bindung verwendet knockout den Wert der Eigenschaft , wie es in dem gebundenen Ansichtsmodell definiert ist , einen Textknoten zu injizieren:

Code: 

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

Berechnete Observables

Berechnete Observables sind Funktionen, die auf andere Observables im Ansichtsmodell "beobachten" oder "reagieren" können. Das folgende Beispiel zeigt, wie Sie die Gesamtzahl der Benutzer und das Durchschnittsalter anzeigen würden.

Hinweis: Im folgenden Beispiel kann auch pureComputed () (eingeführt in v3.2.0) verwendet werden, da die Funktion einfach etwas basierend auf anderen Eigenschaften des Ansichtsmodells berechnet und einen Wert zurückgibt. 

<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
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow