Comprendre Knockout et comment utiliser Knockout pour lier les compétences context_javascript

Introduction à élimination directe

Knockout, appelé ko, est une bibliothèque de classes javascript légère qui utilise le modèle de conception MVVM (c'est-à-dire Model, view, viewModel) pour implémenter simplement et élégamment des liaisons bidirectionnelles et des mises à jour en temps réel, vous aidant ainsi à utiliser un environnement propre. modèle de données pour créer des interfaces utilisateur riches et réactives.

Knockout a trois fonctionnalités principales :

1. Suivi élégant des dépendances : chaque fois que le modèle de données change, la partie correspondante de l'interface utilisateur sera automatiquement mise à jour
 ;

2. Liaisons déclaratives : associez simplement l'interface utilisateur à votre modèle de données et vous pouvez créer une interface utilisateur dynamique complexe
 ;

3. Trivialement extensible : il suffit de quelques lignes de code pour implémenter un comportement personnalisé en tant que liaison déclarative ;

Autres avantages :

1. Code javascript pur

2. Peut être ajouté à votre application Web existante à tout moment

3. Léger, seulement 13K après GZIP

4. Peut fonctionner dans presque tous les navigateurs grand public ((IE 6, Firefox 2, Chrome, Safari, Edge, autres) ;

ko utilise le modèle de conception MVVM, c'est-à-dire la vue modèle viewModel.

Exemple simple

There are <span data-bind="text: myItems().length"></span> items 

C'est aussi simple que cela, vous n'avez pas besoin d'écrire de code pour mettre à jour le contenu du texte, il sera automatiquement mis à jour lorsque la longueur du tableau change. De même, si nous voulons utiliser la longueur du tableau pour contrôler la disponibilité du bouton, nous le faisons. seulement besoin de :

<button data-bind="enable: myItems().length < 5">Add</button>

Ce qui suit présente comment utiliser Knockout pour lier le contexte

Contexte contraignant

Le contexte de liaison est un objet qui contient des données que vous pouvez référencer dans vos liaisons. Knockout crée et gère automatiquement les relations d'héritage pour les contextes de liaison lors de l'application des liaisons. La racine de cette hiérarchie fait référence au paramètre viewModel que vous spécifiez (ko.applyBindings(viewModel)).

Utilisez ensuite un flux de contrôle tel que with ou foreach pour créer à chaque fois un contexte de liaison de nœud enfant pour référencer les données viewModel imbriquées.

$parent

<h1 data-bind="text: name"></h1>
<div data-bind="with: manager">
 <!-- Now we're inside a nested binding context -->
 <span data-bind="text: name"></span> is the
 manager of <span data-bind="text: $parent.name"></span>
</div> 

$parents

Il s'agit d'un tableau représentant tous les modèles de vue du nœud parent

$parent[0] : représente le nœud parent

$parent[1] : représente le nœud grand-parent

$parent[1] : représente le nœud arrière-grand-père

.....et ainsi de suite

$root

Il s'agit de l'objet de modèle de vue du nœud racine du contexte racine, généralement spécifié via ko.applyBindings, équivalent à $parents[$parents.length - 1].

$composant

Si vous êtes dans le contexte d'un modèle de composant spécifique, $component spécifie ce composant, et son composant spécifié est équivalent à $root. Dans le cas de composants imbriqués, il représente le composant le plus proche.

$données

Il représente l'objet viewModel dans le contexte actuel, $data et $root sont équivalents. Dans un contexte de liaison imbriquée, ce paramètre sera défini sur l'élément de données actuel.

$data est très utile, par exemple, lorsque vous souhaitez référencer le viewModel lui-même plutôt que les propriétés du viewModel.

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul> 
$index(仅在foreach binding中可用)

Il s'agit de l'entrée d'index de base 0 du tableau dans la liaison foreach. Contrairement aux autres attributs de contexte, $index est observable, c'est-à-dire qu'il sera mis à jour au fur et à mesure que l'élément du tableau est mis à jour.

$parentContext

Spécifie l'objet de contexte de liaison au niveau du nœud parent. La différence avec $parent est qu'il spécifie les données dans le nœud parent plutôt que le contexte de liaison.

$rowData

C'est la valeur du viewModel d'origine dans le contexte actuel. Habituellement, elle est équivalente à $data Cependant, si le viewModel est modifié par ko avec observable, $data n'est pas observable et $rowData est observable.