knockout.js Tutoriel
Démarrer avec knockout.js

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


Remarques

Cette section fournit une vue d'ensemble de ce que knockout.js est et pourquoi un développeur peut vouloir l'utiliser.

Il devrait également mentionner tous les grands sujets dans knockout.js, et établir un lien avec les sujets connexes. Comme la documentation de knockout.js est nouvelle, vous devrez peut-être créer des versions initiales de ces rubriques connexes.

Versions

Version Remarques Date de sortie
3.4.2 Corrections de bugs 2017-03-06
3.4.1 Corrections de bugs 2016-11-08
3.4.0 2015-11-17
3.3.0 2015-02-18
3.2.0 Liaison de component introduite 2014-08-12
3.1.0 2014-05-14
3.0.0 Voir aussi: mise à niveau (à partir de 2.x) notes 2013-10-25
2.3.0 Dernière version 2.x 2013-07-08
2.0.0 2011-12-21
1.2.1 Dernière version 1.x 2011-05-22
1.0.0 2010-07-05

Installation ou configuration

Knockout est disponible sur la plupart des plates-formes JavaScript ou en tant que script autonome.

Inclure comme script

Vous pouvez télécharger le script depuis sa page de téléchargement , puis l'inclure dans votre page avec une script tag standard 

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

Utiliser un CDN

Vous pouvez également inclure des knock-out du CDN Microsoft ou CDNJS 

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

OU 

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

Installer à partir de npm 

npm install knockout

facultativement, vous pouvez ajouter le paramètre --save pour le conserver dans votre fichier package.json

Installer à partir de bower 

bower install knockout

facultativement, vous pouvez ajouter le paramètre --save pour le conserver dans votre fichier bower.json

Installer depuis NuGet 

Install-Package knockoutjs

Pour commencer: Bonjour tout le monde!

Créer un document HTML et activer knockout.js

Créez un fichier HTML et incluez knockout.js via une <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>

Ajoutez une seconde <script> sous le script knockout. Dans cette balise de script, nous allons initialiser un modèle de vue et appliquer des données liées à notre 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>

Maintenant, continuez à créer une vue en ajoutant du HTML au corps: 

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

Lorsque le document HTML est ouvert et que les scripts sont exécutés, vous verrez une page indiquant Bonjour, Monde! . Lorsque vous modifiez les mots dans les éléments <input> , le texte <h1> est automatiquement mis à jour.

Comment le fichier créé fonctionne

  1. Une version de débogage de knockout est chargée depuis une source externe (cdnjs)

Code: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
  1. Une instance viewmodel est créée et possède des propriétés observables . Cela signifie que KO peut détecter les modifications et mettre à jour l'interface utilisateur en conséquence.

Code: 

var appVM = new ViewModel();
  1. Knockout vérifie les attributs de data-bind de data-bind du DOM et met à jour l'interface utilisateur à l'aide du modèle de vue fourni.

Code: 

ko.applyBindings(appVM);
  1. Lorsqu'il rencontre une liaison de text , le masquage utilise la valeur de la propriété telle qu'elle est définie dans le modèle de vue lié pour injecter un nœud de texte:

Code: 

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

Observables Calculés

Les observables calculés sont des fonctions qui peuvent "regarder" ou "réagir" à d'autres observables du modèle de vue. L'exemple suivant montre comment afficher le nombre total d'utilisateurs et l'âge moyen.

Remarque: L'exemple ci-dessous peut également utiliser pureComputed () (introduit dans la version 3.2.0) car la fonction calcule simplement quelque chose en fonction d'autres propriétés du modèle de vue et renvoie une valeur. 

<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
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow