Accentsconagua

Liaison de flux de contrôle

Code
Share

Comme nous l'avons vu dans les leçons précédentes, concevoir une vue pour un ViewModel revient à créer un modèle HTML pour un objet JavaScript. La possibilité de contrôler le déroulement de l’exécution des modèles fait partie intégrante de tout système de modèles. La possibilité de parcourir des listes de données et d'inclure ou d'exclure des éléments visuels en fonction de certaines conditions permet de minimiser le balisage et vous permet de contrôler totalement l'affichage de vos données..

Nous avons déjà vu comment le pour chaque La liaison peut se faire en boucle sur un tableau observable, mais Knockout.js inclut également deux liaisons logiques: si et sinon. En outre, sa liaison avec vous permet de modifier manuellement la portée des blocs de modèle.

Cette leçon présente les liaisons de contrôle de Knockout.js en développant l'exemple de panier d'achat de la leçon précédente. Nous allons également explorer certaines des nuances de pour chaque qui ont été passés sous silence dans la dernière leçon.

le pour chaque Contraignant

Commençons par regarder de plus près notre existant pour chaque boucle:

Quand Knockout.js se rencontre pour chaque dans le liaison de données attribut, il parcourt le tableau shoppingCart et utilise chaque élément trouvé pour le contexte contraignant du balisage contenu. C'est dans ce contexte de liaison que Knockout.js gère l'étendue des boucles. Dans ce cas, c’est pourquoi nous pouvons utiliser les propriétés name et price sans faire référence à une instance de Product..

Travailler avec des contextes de reliure

L'utilisation de chaque élément d'un tableau en tant que nouveau contexte de liaison constitue un moyen pratique de créer des boucles, mais ce comportement rend également impossible la référence à des objets extérieurs à l'élément actuel de l'itération. Pour cette raison, Knockout.js rend plusieurs propriétés spéciales disponibles dans chaque contexte de liaison. Notez que toutes ces propriétés ne sont disponibles que dans la vue, pas le ViewModel.

le $ root Propriété

le $ root le contexte fait toujours référence au ViewModel de niveau supérieur, quelles que soient les boucles ou autres modifications de l'étendue. Comme nous l'avons vu dans la leçon précédente, cela permet d'accéder aux méthodes de niveau supérieur permettant de manipuler le ViewModel..

le $ data Propriété

le $ data La propriété dans un contexte de liaison fait référence à l'objet ViewModel pour le contexte actuel. C'est un peu comme le ce mot clé dans un objet JavaScript. Par exemple, dans notre boucle foreach: shoppingCart, $ data fait référence à l'élément de la liste en cours. En conséquence, le code suivant fonctionne exactement comme il le ferait sans utiliser $ data:

Cela peut sembler une propriété triviale, mais il est indispensable lorsque vous effectuez une itération dans des tableaux contenant des valeurs atomiques telles que des chaînes ou des nombres. Par exemple, nous pouvons stocker une liste de chaînes représentant des balises pour chaque produit:

 fonction Produit (nom, prix, tags) this.name = ko.observable (name); this.price = ko.observable (prix); tags = typeof (tags)! == 'undefined'? Mots clés : []; this.tags = ko.observableArray (tags);

Ensuite, définissez des tags pour l’un des produits de la chariot tableau:

 nouveau produit ("Buns", 1.49, ["Produits de boulangerie", "Hot dogs"]);

Nous pouvons maintenant voir le contexte $ data en action. dans le

contenant nos articles de panier, ajoutez un
élément contenant un
    liste itérant à travers le Mots clés tableau:

À l'intérieur de la foreach: balises Pour ce faire, Knockout.js utilise les chaînes natives «Baked goods» et «Hot dogs» comme contexte contraignant. Mais, puisque nous voulons accéder aux chaînes réelles au lieu de leurs Propriétés, nous avons besoin de l'objet de données $.

le $ index Propriété

À l'intérieur d'un pour chaque boucle, la $ index propriété contient l'index de l'élément en cours dans le tableau. Comme la plupart des choses dans Knockout.js, la valeur de $ index sera mise à jour automatiquement chaque fois que vous ajoutez ou supprimez un élément du tableau observable associé. C'est une propriété utile si vous devez afficher l'index de chaque élément, comme ceci:

le $ parent Propriété

le $ parent propriété fait référence à l'objet ViewModel parent. En règle générale, vous en aurez besoin uniquement lorsque vous utilisez des boucles imbriquées et que vous devez accéder aux propriétés de la boucle externe. Par exemple, si vous devez accéder à la Produit exemple de l'intérieur de la boucle foreach: tags, vous pouvez utiliser la propriété $ parent:

 
     
  •   -  
    •

Entre les tableaux observables, le pour chaque la liaison et les propriétés de contexte de liaison évoquées précédemment, vous devez disposer de tous les outils nécessaires pour exploiter les tableaux dans vos applications Web Knockout.js.

Produits à prix réduits

Avant de passer aux liaisons conditionnelles, nous allons ajouter un remise propriété de notre classe de produits:

 fonction Produit (nom, prix, tags, remise) … remise = typeof (remise)! == 'undefined'? remise: 0; this.discount = ko.observable (réduction); this.formattedDiscount = ko.computed (function () return (this.discount () * 100) + "%";, ceci);

Cela nous donne une condition que nous pouvons vérifier avec les liaisons logiques de Knockout.js. Tout d'abord, nous faisons le remise paramètre optional, lui donnant une valeur par défaut de 0. Ensuite, nous créons un observable pour la remise afin que Knockout.js puisse suivre ses modifications. Enfin, nous définissons une observable calculée qui renvoie une version conviviale du pourcentage de remise..

Continuons et ajoutons une réduction de 20% sur le premier article de PersonViewModel.shoppingCart:

 this.shoppingCart = ko.observableArray ([nouveau produit ("Bière", 10,99, nulle, .20), nouveau produit ("Brats", 7,99), nouveau produit ("Buns", 1.49, ['Produits de boulangerie', ' Chiens chauds']); ]);

le si et si non Fixations

le si La liaison est une liaison conditionnelle. Si le paramètre que vous transmettez est évalué à true, le code HTML contenu sera affiché, sinon il est supprimé du DOM. Par exemple, essayez d’ajouter la cellule suivante à la

contenant les articles du panier, juste avant le bouton "Supprimer".

Tout à l'intérieur du

Vous avez enregistré !!! l'élément n'apparaîtra que pour les articles ayant un rabais supérieur à 0. De plus, étant donné que la réduction est observable, Knockout.js réévaluera automatiquement la condition à chaque changement. Ceci est juste une autre façon pour Knockout.js de vous aider à vous concentrer sur les données qui dirigent votre application..

Figure 15: rendu conditionnel d'une remise pour chaque produit

Vous pouvez utiliser tout Expression JavaScript en tant que condition: Knockout.js essaiera d'évaluer la chaîne en tant que code JavaScript et utilisera le résultat pour afficher ou masquer l'élément. Comme vous l'avez peut-être deviné, le si non la liaison nie simplement l'expression.

le avec Contraignant

le avec La liaison peut être utilisée pour déclarer manuellement l'étendue d'un bloc particulier. Essayez d’ajouter l’extrait de code suivant dans la partie supérieure de votre vue, avant les boutons «Checkout» et «Add Beer»:

 
 As-tu besoin ? 
 Obtenez-en un maintenant pour seulement .

À l'intérieur de la avec block, Knockout.js utilise PersonViewModel.featuredProduct en tant que contexte contraignant. Ainsi, le texte: nom et texte: les liaisons de prix fonctionnent comme prévu sans référence à leur objet parent.

Bien sûr, pour que le HTML précédent fonctionne, vous devez définir un Produit en vedette propriété sur PersonViewModel:

 var en vedette = nouveau produit ("Sauce barbecue Acme", 3,99); this.featuredProduct = ko.observable (en vedette);

Résumé

Cette leçon a présenté le pour chaque, si, sinon, et avec des liaisons. Ces liaisons de flux de contrôle vous permettent de contrôler totalement l'affichage de votre ViewModel dans une vue..

Il est important de comprendre la relation entre les liaisons et les observables de Knockout.js. Techniquement, les deux sont entièrement indépendants. Comme nous l’avons vu au tout début de cette série, vous pouvez utiliser un objet normal avec des propriétés JavaScript natives (i.e. ne pas observables) comme votre ViewModel, et Knockout.js rendront les liaisons de la vue correctement. Cependant, Knockout.js ne traitera le modèle que la première fois sans observables, il ne peut pas mettre à jour automatiquement la vue lorsque les données sous-jacentes sont modifiées. Voyant que c’est tout l’intérêt de Knockout.js, vous verrez généralement les liaisons se référer à observable propriétés, comme notre pour chaque: shoppingCart obligatoire dans les exemples précédents.

Maintenant que nous pouvons contrôler la logique derrière nos modèles de vue, nous pouvons maintenant contrôler l'apparence des éléments HTML individuels. La prochaine leçon se penche sur la partie amusante de Knockout.js: les liaisons d’apparence.

Cette leçon représente un chapitre de Knockout Succinctly, un eBook gratuit de l'équipe de Syncfusion.

Code
×