KnockoutJS - Observables

KnockoutJS repose sur les 3 concepts importants suivants.

  • Observables et suivi des dépendances entre eux - les éléments DOM sont connectés à ViewModel via 'data-bind'. Ils échangent des informations via Observables. Cela prend automatiquement en charge le suivi des dépendances.

  • Liaisons déclaratives entre l'interface utilisateur et ViewModel - Les éléments DOM sont connectés à ViewModel via le concept de «liaison de données».

  • Création de modèles pour créer des composants réutilisables - La création de modèles fournit un moyen robuste de créer des applications Web complexes.

Nous étudierons les observables dans ce chapitre.

Comme son nom l'indique, lorsque vous déclarez une donnée / propriété ViewModel comme Observable, toute modification de données à chaque fois est automatiquement reflétée à tous les endroits où les données sont utilisées. Cela inclut également l'actualisation des dépendances associées. KO s'occupe de ces choses et il n'est pas nécessaire d'écrire du code supplémentaire pour y parvenir.

En utilisant Observable, il devient très facile de faire communiquer dynamiquement l'interface utilisateur et ViewModel.

Syntaxe

Il vous suffit de déclarer la propriété ViewModel avec la fonction ko.observable() pour le rendre observable.

this.property = ko.observable('value');

Exemple

Jetons un coup d'œil à l'exemple suivant qui montre l'utilisation d'Observable.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable 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>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

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

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

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

La ligne suivante est pour la zone de saisie. Comme on peut le voir, nous avons utilisé l'attribut data-bind pour lier la valeur yourName à ViewModel.

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

La ligne suivante imprime simplement la valeur de yourName. Notez qu'ici le type de liaison de données est le texte car nous lisons simplement la valeur.

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

Dans la ligne suivante, ko.observable garde un œil sur la variable yourName pour toute modification des données. Une fois qu'il y a une modification, les emplacements correspondants sont également mis à jour avec la valeur modifiée. Lorsque vous exécutez le code suivant, une zone de saisie apparaît. Au fur et à mesure que vous mettez à jour cette zone de saisie, la nouvelle valeur sera reflétée ou actualisée partout où elle est utilisée.

this.yourName = ko.observable("");

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans first_observable_pgm.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Entrez le nom comme Scott et observez que le nom est reflété dans la sortie.

La modification des données peut avoir lieu depuis l'interface utilisateur ou depuis ViewModel. Indépendamment de l'endroit où les données sont modifiées, l'interface utilisateur et ViewModel se synchronisent entre eux. Cela en fait un mécanisme de liaison bidirectionnelle. Dans l'exemple ci-dessus, lorsque vous modifiez votre nom dans la zone de saisie, ViewModel obtient une nouvelle valeur. Lorsque vous modifiez votre propriétéName depuis ViewModel, l'interface utilisateur reçoit une nouvelle valeur.

Lecture et écriture d'observables

Le tableau suivant répertorie les opérations de lecture et d'écriture qui peuvent être effectuées sur les observables.

Sr.No. Opération de lecture / écriture et syntaxe
1

Read

Pour lire la valeur, appelez simplement la propriété Observable sans paramètres tels que: AppViewModel.yourName ();
2

Write

Pour écrire / mettre à jour la valeur dans la propriété Observable, transmettez simplement la valeur souhaitée dans le paramètre comme: AppViewModel.yourName ('Bob');
3

Write multiple

Plusieurs propriétés ViewModel peuvent être mises à jour sur une seule ligne à l'aide d'une syntaxe de chaînage comme: AppViewModel.yourName ('Bob'). YourAge (45);

Tableaux observables

La déclaration observable prend en charge les modifications de données d'un seul objet. ObservableArray fonctionne avec la collection d'objets. Il s'agit d'une fonctionnalité très utile lorsque vous traitez avec des applications complexes contenant plusieurs types de valeurs et changeant fréquemment leur statut en fonction des actions de l'utilisateur.

Syntaxe

this.arrayName = ko.observableArray();    // It's an empty array

Le tableau observable ne suit que les objets qui y sont ajoutés ou supprimés. Il ne notifie pas si les propriétés de l'objet individuel sont modifiées.

Initialisez-le pour la première fois

Vous pouvez initialiser votre tableau et en même temps le déclarer comme Observable en passant les valeurs initiales au constructeur comme suit.

this.arrayName = ko.observableArray(['scott','jack']);

Lecture à partir d'un tableau observable

Vous pouvez accéder aux éléments du tableau Observable comme suit.

alert('The second element is ' + arrayName()[1]);

Fonctions ObservableArray

KnockoutJS a son propre ensemble de fonctions de tableau Observable. Ils sont pratiques parce que -

  • Ces fonctions fonctionnent sur tous les navigateurs.

  • Ces fonctions se chargeront automatiquement du suivi des dépendances.

  • La syntaxe est facile à utiliser. Par exemple, pour insérer un élément dans un tableau, il vous suffit d'utiliser arrayName.push ('value') au lieu de arrayName (). Push ('value').

Voici la liste des différentes méthodes de tableaux observables.

Sr.No. Méthodes et description
1 push ('valeur')

Insère un nouvel élément à la fin du tableau.
2 pop()

Supprime le dernier élément du tableau et le renvoie.
3 unshift ('valeur')

Insère une nouvelle valeur au début du tableau.
4 décalage()

Supprime le premier élément du tableau et le renvoie.
5 inverser()

Inverse l'ordre du tableau.
6 Trier()

Trie les éléments du tableau dans un ordre croissant.
sept splice (index de début, index de fin)

Accepte 2 paramètres - index de début et index de fin - supprime les éléments de l'index de début à l'index de fin et les renvoie sous forme de tableau.
8 indexOf ('valeur')

Cette fonction renvoie l'index de la première occurrence du paramètre fourni.
9 tranche (index de début, index de fin)

Cette méthode découpe un morceau d'un tableau. Renvoie les éléments de l'index de début à l'index de fin.
dix Enlever tout()

Supprime tous les éléments et les renvoie sous forme de tableau.
11 remove ('valeur')

Supprime les éléments qui correspondent au paramètre et retourne sous forme de tableau.
12 supprimer (fonction (élément) {condition})

Supprime les éléments qui satisfont à la condition et les renvoie sous forme de tableau.
13 supprimer ([ensemble de valeurs])

Supprime les éléments qui correspondent à un ensemble de valeurs donné.
14

destroyAll()

Marque tous les éléments d'un tableau avec la propriété _destroy avec la valeur true.
15

destroy('value')

Recherche un élément égal au paramètre et marque-le avec une propriété spéciale _destroy avec la valeur true.
16

destroy(function(item) { condition})

Recherche tous les éléments qui satisfont à la condition, les marque avec la propriété _destroy avec la valeur vraie.
17

destroy([set of values])

Recherche les éléments qui correspondent à un ensemble donné de valeurs, les marque comme _destroy avec la valeur vraie.

Note - Les fonctions Destroy et DestroyAll d'ObservableArrays sont principalement réservées aux développeurs 'Ruby on Rails'.

Lorsque vous utilisez la méthode destroy, les éléments correspondants ne sont pas vraiment supprimés du tableau à ce moment, mais sont masqués en les marquant avec la propriété _destroy avec la valeur vraie afin qu'ils ne puissent pas être lus par l'interface utilisateur. Les éléments marqués comme _destroy égal à true sont supprimés ultérieurement lors du traitement du graphe d'objets JSON.