KnockoutJS - Configuration de l'environnement

Il est très facile d'utiliser KnockoutJS. Faites simplement référence au fichier JavaScript en utilisant la balise <script> dans les pages HTML.

Knockout.js est accessible des manières suivantes -

  • Vous pouvez télécharger la version de production de Knockout.js depuis son site officiel

    Une page comme dans l'image suivante sera affichée. Cliquez sur le lien de téléchargement et vous obtiendrez le dernier fichier knockout.js.

Maintenant, référez-vous au fichier comme indiqué dans le code suivant.

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

Mettez à jour l'attribut src pour qu'il corresponde à l'emplacement où les fichiers téléchargés sont conservés.

  • Vous pouvez vous référer à la bibliothèque KnockoutJS à partir des CDN -

    • Vous pouvez faire référence à la bibliothèque KnockoutJS de Microsoft Ajax CDN dans votre code comme suit -

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
   type = "text/javascript"></script>

  • Vous pouvez également vous référer à une version minifiée de la bibliothèque KnockoutJS de CDNJS comme suit -

<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" 
   type = "text/javascript"></script>

Note - Dans tous les chapitres de ce tutoriel, nous avons fait référence à la version CDN de la bibliothèque KnockoutJS.

Exemple

KnockoutJS est basé sur le modèle Model-View-ViewModel (MVVM). Nous étudierons ce modèle en profondeur dans le chapitre KnockoutJS - MVVM Framework . Jetons d'abord un coup d'œil à un exemple simple de KnockoutJS.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Simple Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>

   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>First String: <input data-bind = "value: firstString" /></p>
      <p>Second String: <input data-bind = "value: secondString" /></p>

      <p>First String: <strong data-bind = "text: firstString">Hi</strong></p>
      <p>Second String: <strong data-bind = "text: secondString">There</strong></p>

      <p>Derived String: <strong data-bind = "text: thirdString"></strong></p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and 
            behavior of UI -->

         function AppViewModel() {
            this.firstString = ko.observable("Enter First String");
            this.secondString = ko.observable("Enter Second String");

            this.thirdString = ko.computed(function() {
               return this.firstString() + " " + this.secondString();
            }, this);
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>

   </body>
</html>

La ligne suivante fait référence à la bibliothèque KnockoutJS.

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
   type = "text/javascript"> </script>

Cette ligne fait référence à la bibliothèque KnockoutJS.

Nous avons deux zones de saisie: First String et Second String. Ces 2 variables sont initialisées avec les valeurs Enter First String et Enter Second String respectivement dans ViewModel.

<p>First String: < input data-bind = "value: firstString" /> </p>

C'est ainsi que nous lions les valeurs de ViewModel aux éléments HTML en utilisant 'data-bind' attribut dans la section corps.

Ici, «firstString» fait référence à la variable ViewModel.

this.firstString = ko.observable("Enter First String");

ko.observable est un concept qui garde un œil sur les changements de valeur afin de pouvoir mettre à jour les données ViewModel sous-jacentes.

Pour mieux comprendre cela, mettons à jour la première zone de saisie sur "Hello" et la deuxième zone de saisie sur "TutorialsPoint". Vous verrez que les valeurs sont mises à jour simultanément. Nous étudierons plus en détail ce concept dans le chapitre KnockoutJS - Observables .

this.thirdString = ko.computed(function() {
   return this.firstString() + " " + this.secondString();
}, this);

Ensuite, nous avons calculé la fonction dans viewmodel. Cette fonction dérive la troisième chaîne basée sur 2 chaînes mentionnées précédemment. Ainsi, toutes les mises à jour apportées à ces chaînes sont automatiquement reflétées dans cette chaîne dérivée. Il n'est pas nécessaire d'écrire un code supplémentaire pour ce faire. Ceci n'est qu'un simple exemple. Nous étudierons ce concept dans le chapitre KnockoutJS - Computed Observables .

Production

Enregistrez le code ci-dessus sous my_first_knockoutjs_program.html. Ouvrez ce fichier dans votre navigateur et vous verrez une sortie comme suit.

Modifiez les chaînes en "Hello" et "TutorialsPoint" et la sortie change comme suit.