Guide des débutants sur les knockoutjs: partie 2

Les plats clés

• knockoutjs propose une variété de liaisons intégrées qui simplifient le processus de connexion des éléments d'interface utilisateur aux modèles de données, ce qui facilite la création d'interface utilisateur dynamique et réactive.
• Les liaisons du texte et de la valeur dans les knockoutjs facilitent la liaison des données bidirectionnelle simple pour les éléments HTML, mettant automatiquement à la mise à jour de l'interface utilisateur lorsque le modèle de données change et vice versa.
• knockoutjs comprend des liaisons d'événements comme `click` et` soumider ', qui permettent aux développeurs d'ajouter un comportement aux éléments de l'interface utilisateur sans avoir besoin de manipulation manuelle d'événements, rationalisant le processus de développement.
• La bibliothèque prend en charge les liaisons conditionnelles et de style telles que «Visible», «Activer» et «CSS», permettant aux développeurs de contrôler la visibilité des éléments et de style dynamiquement en fonction de l'état du modèle de données.
• Les fonctionnalités avancées comme la liaison `` Options` pour les listes déroulantes et la liaison «cochée» pour les cases à cocher et les boutons radio fournissent des outils robustes pour gérer des éléments de formulaire plus complexes dans l'interface utilisateur.

Un guide des débutants pour knockoutjs: liaisons

Le knockout fournit un ensemble entier de liaisons intégrées utiles pour les tâches et scénarios les plus courants. Chacune de ces liaisons vous permet de lier des valeurs de données simples ou d'utiliser des expressions JavaScript pour calculer la valeur appropriée. Cela offre beaucoup de flexibilité et facilite la création d'UIS très dynamiques avec un minimum d'effort.

La syntaxe pour l'utilisation des liaisons intégrées consiste à inclure le nom de liaison à élimination directe et la propriété du modèle de vue se marie à l'intérieur de l'attribut de données de données d'un élément HTML.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Si vous souhaitez que les données se lient à plus d'une propriété dans l'élément HTML, séparez simplement les liaisons par une virgule en utilisant cette syntaxe:

<span data-bind="text: msg, visible: toggle"></span>

Vous devez garder à l'esprit que la plupart des liaisons tentent de convertir n'importe quel paramètre en valeur booléenne. Si vous donnez une valeur qui n'est pas réellement booléenne, elle sera interprétée vaguement comme une vérité ou une fausseté. Cela signifie que les nombres non nuls et les objets non nuls et les chaînes non vides seront toutes interprétées comme vraies, tandis que zéro, nul, non défini et vide seront interprétés comme faux.

Si vous comprenez comment utiliser un type de liaison de données, les autres devraient être assez faciles à apprendre. Maintenant, nous allons expliquer chacun d'eux en fournissant une description et un court exemple.

liaisons simples

Nous avons déjà vu la liaison du texte lors de la gestion des observables dans le tutoriel précédent. Il définit le texte de l'élément associé à la valeur de votre paramètre. Ceci est l'équivalent de la définition de la propriété InnerText (pour IE) ou TextContent (pour les autres navigateurs) de l'élément DOM. Si votre paramètre est autre chose qu'un nombre ou une chaîne, la liaison attribuera les résultats de toString () à l'élément.

Si ce paramètre est une valeur observable, la liaison mettra à jour le texte de l'élément chaque fois que la valeur change. Si le paramètre n'est pas observable, il ne définira le texte de l'élément qu'une seule fois et ne le mettra pas à jour plus tard. Ceci est valable pour toutes les liaisons.

La liaison du texte est souvent utilisée pour afficher les valeurs dans un élément Span ou Div. Lorsqu'il est utilisé, tout texte précédent sera écrasé.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Valeur Binding Définit la valeur de l'élément associé à la valeur de votre paramètre. Ceci est généralement utilisé pour les éléments de formulaire comme l'entrée, la sélection et la textarea. Lorsque l'utilisateur modifie la valeur dans le contrôle de formulaire associé, il met à jour la valeur de votre modèle de vue. De même, lorsque vous mettez à jour la valeur dans votre modèle de vue, cela met à jour la valeur du contrôle de formulaire à l'écran. Ceci est connu sous le nom de liaison bidirectionnelle. Si votre paramètre est autre chose qu'un nombre ou une chaîne, la liaison attribuera les résultats de toString () à l'élément.

Par défaut, KO met à jour votre modèle de vue lorsque les transferts de l'utilisateur se concentrent sur un autre nœud DOM, sur l'événement de modification, mais vous pouvez contrôler lorsque la valeur est mise à jour à l'aide du paramètre Valueupdate décrit ci-dessous. Si votre liaison comprend également un paramètre appelé ValueUpdate, cela définit le knockout de l'événement du navigateur doit utiliser pour détecter les modifications.

"Modifier" est l'événement par défaut et il met à jour votre modèle de vue lorsque l'utilisateur déplace la mise au point vers un contrôle différent, ou dans le cas des éléments , immédiatement après tout changement.

"AfterKeyDown" - met à jour votre modèle de vue dès que l'utilisateur commence à taper un caractère. Cela fonctionne en attrapant l'événement Keydown du navigateur et en gérant l'événement de manière asynchrone. Si vous souhaitez garder votre modèle de vue mis à jour en temps réel en utilisant "AfterKeydown" sera le meilleur choix.

"KeyUp" - met à jour votre modèle de vue lorsque l'utilisateur libère une clé

"Keypress" - met à jour votre modèle de vue lorsque l'utilisateur a tapé une clé. Cela met à jour à plusieurs reprises si l'utilisateur détient une clé

<span data-bind="text: msg, visible: toggle"></span>

Contrôle Marquez

La liaison HTML n'est pas utilisée aussi souvent, mais elle est très pratique pour rendre le contenu HTML dans votre modèle de vue. Cette liaison définit le HTML de l'élément associé à la valeur de votre paramètre et est l'équivalent de la définition de la propriété innerHTML sur l'élément DOM. Si votre paramètre est autre chose qu'un nombre ou une chaîne, la liaison attribuera les résultats de toString () à l'élément.

Étant donné que cette liaison définit le contenu de votre élément en utilisant InnerHTML, vous devez faire attention de ne pas l'utiliser avec des valeurs de modèle non fiables, car cela pourrait ouvrir la possibilité d'une attaque d'injection de script. Si vous ne pouvez pas garantir que le contenu est sûr à afficher, vous pouvez utiliser la liaison de texte à la place.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Bien que le knockout ait de nombreuses reliures intégrées, vous rencontrerez sûrement certaines situations pour lesquelles aucune n'existe. Pour ceux-ci, le knockout offre la liaison ATR, ce qui vous permet de lier tout attribut à une propriété de modèle de vue. Le paramètre doit être un objet JavaScript où les noms de propriété sont les attributs et les valeurs de propriété sont la valeur qui sera liée à l'attribut. Ceci est très utile dans de nombreux scénarios communs, tels que la liaison du HREF et du titre de l'élément A ou du Src et de l'Alt de l'élément IMG.

<span data-bind="text: msg, visible: toggle"></span>

Ajouter le style

Vous pouvez lier les styles avec le knockout en utilisant le CSS et les liaisons intégrées de style.

La liaison CSS définit une ou plusieurs classes CSS pour l'élément associé. Le paramètre doit être un objet JavaScript où les noms de propriétés correspondent aux classes CSS souhaitées et les valeurs de propriété évaluent à True ou Faux indiquant si la classe doit être appliquée. Vous pouvez définir plusieurs classes CSS à la fois.

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

Vous pouvez utiliser une expression pour déterminer quand la classe sera appliquée.

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

Bien qu'il soit préférable d'utiliser des classes CSS chaque fois que possible, vous voudrez peut-être également définir un style spécifique. KO SUPPORT cela avec sa liaison intégrée de style qui définit une ou plusieurs valeurs de style pour l'élément associé. Le paramètre doit être un objet dont les propriétés correspondent aux noms des styles CSS, et les valeurs correspondent aux valeurs de style que vous souhaitez appliquer. En règle générale, cette valeur de paramètre est déclarée en utilisant JSON.

<div data-bind="html: markup"></div>

function viewModel() {
 var self = this;
 self.markup = ko.observable('<p><strong>Knockout</strong> is so <em>cool</em>!</p>')
};
ko.applyBindings(new viewModel());

Remarque: Lorsque vous avez une classe d'attribut ou de CSS dont le nom n'est pas le nom de variable JavaScript légal, vous devez envelopper le nom de l'identifiant en guillemets afin qu'il devienne un littéral de chaîne. Et si vous souhaitez appliquer un style dont le nom n'est pas un identifiant JavaScript légal, vous devez utiliser le nom JavaScript pour ce style.

<img data-bind="attr: {src: url, alt: details}" />

function viewModel() {
 var self = this;
 self.url = ko.observable(images/logo.png)
 self.details = ko.observable('This is logo')
};
ko.applyBindings(new viewModel());

Gestion des événements

Le knockout prend en charge la liaison à tout événement via sa liaison intégrée d'événement. Il ajoute des gestionnaires d'événements pour les événements spécifiés à l'élément DOM associé. Vous pouvez l'utiliser pour se lier à tous les événements HTML définis. Dans votre gestionnaire d'événements, vous pouvez accéder à l'élément de données du modèle de vue actuel, à l'objet événement ou même aux paramètres personnalisés dans le cadre de la liaison des événements. Pour utiliser la liaison des événements, vous passez un objet littéral contenant des paires de valeur de nom pour le nom de l'événement et la méthode du modèle de vue, séparée par les virgules.

<style>
.colorize {color: red}
</style>

<p data-bind="css: { colorize: on }">Text</p>

function viewModel() {
 var self = this;
 self.on = ko.observable(true)
};
ko.applyBindings(new viewModel());

Cliquez sur la liaison, comme vous pouvez le deviner, gère l'événement de clic. Parce que c'est la liaison la plus utilisée pour les événements, c'est simplement un raccourci vers la liaison des événements.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Soumettre la liaison est un raccourci pour gérer l'événement Soumettre pour l'élément de formulaire. Lorsque vous utilisez la liaison de soumission sur un formulaire, le knockout empêchera l'action de soumission par défaut du navigateur pour ce formulaire. En d'autres termes, le navigateur appellera votre fonction de gestionnaire mais ne soumetra pas le formulaire au serveur. Il s'agit d'une valeur par défaut utile car lorsque vous utilisez la liaison de soumission, c'est normalement parce que vous utilisez le formulaire comme interface à votre modèle de vue, et non comme un formulaire HTML ordinaire. Si vous souhaitez laisser le formulaire soumettre comme un formulaire HTML normal, retournez simplement vrai de votre gestionnaire de soumission.

Au lieu d'utiliser Soumettre sur le formulaire, vous pouvez utiliser Cliquez sur le bouton Soumettre. Mais l'utilisation de la liaison de soumission vous donne les avantages de l'utilisation de moyens alternatifs de soumettre le formulaire, comme appuyer sur la touche Entrée tout en tapant dans une zone de texte.

Contrôle UI

La liaison visible définit la visibilité de l'élément associé en fonction de la valeur du paramètre de liaison. La liaison tente de convertir n'importe quel paramètre en valeur booléenne. La liaison visible du KO de KO doit être liée à une propriété qui évalue à vrai ou fausse. Cela a priorité sur tout style d'affichage que vous avez défini à l'aide de CSS.

<span data-bind="text: msg, visible: toggle"></span>

Activer / désactiver la liaison définit l'attribut désactivé sur l'élément associé en fonction de la valeur fournie. Ceci est généralement utilisé pour des éléments de formulaire comme l'entrée, la sélection et la textarea. Le knockout fournit des liaisons intégrées pour activer et désactiver les éléments d'entrée. La liaison Activer permettra à l'élément d'entrée si la propriété qu'il est tenue d'évaluer TRUE, et désactivera l'élément s'il évalue en false. La liaison désactivée fait exactement le contraire

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

knockout a une liaison intégrée nommée Hasfocus qui détermine et définit quel élément a la mise au point. La liaison Hasfocus est pratique lorsque vous souhaitez que la mise au point soit définie sur un élément spécifique sur un formulaire par exemple le formulaire de recherche lorsque le visiteur ouvre la page

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

traitant des cases à cocher et des boutons radio

Les cases à cocher peuvent être des données liées à la liaison cochée du KO. La liaison vérifiée doit être liée à une propriété ou à une expression qui évalue à vrai ou fausse. Étant donné que les propriétés du modèle de vue sont définies comme des observables, la case à cocher est mise à jour lorsque la propriété source change. De même, lorsqu'un utilisateur vérifie ou décoche la case à cocher, la valeur est mise à jour dans la propriété du modèle Affichage. Cette liaison définit l'état coché des boutons radio et des cases à cocher. Pour les cases à cocher, la liaison tente de convertir n'importe quel paramètre en valeur booléenne. Pour les boutons radio, la liaison compare l'attribut de valeur des boutons au paramètre de liaison.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Création de listes déroulantes

Les listes déroulantes ont plusieurs propriétés importantes pour charger une liste d'éléments, afficher une valeur, utiliser une valeur clé différente et stocker la sélection de l'utilisateur. Le knockout fournit une reliure intégrée pour chacun d'eux. Options Binding Définit les options qui apparaîtront dans un élément de liste déroulante. La valeur doit être un tableau. Cette liaison ne peut pas être utilisée avec autre chose que des éléments. Pour une liste multi-sélects, pour définir les options sélectionnées, ou pour lire les options sélectionnées, utilisez la liaison de selectedOptions. Pour une liste unique, vous pouvez également lire et écrire l'option sélectionnée à l'aide de la liaison de valeur.

La liaison des options identifie une liste de valeurs à afficher, généralement à partir d'une propriété de tableau sur le modèle de vue.

<span data-bind="text: msg, visible: toggle"></span>

Les contrôles de liaison sélectionnés par SelectOptions quels éléments dans une liste multi-sélecteurs sont actuellement sélectionnés. Lorsque l'utilisateur sélectionne ou déselecte un élément dans la liste multi-sélects, cela ajoute ou supprime la valeur correspondante à un tableau sur votre modèle de vue.

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

Parfois, vous souhaitez afficher une valeur dans la liste déroulante, mais utilisez une autre valeur lorsqu'un utilisateur sélectionne un élément dans la liste. OptionStExt intégrée de KO KOCKOut et OptionsValue Bindings Aide. La liaison OptionSText est définie sur le nom de chaîne de la propriété à afficher dans la liste déroulante, à partir de la liaison des options. La liaison OptionsValue est définie sur le nom de chaîne de la propriété pour se lier pour la valeur sélectionnée de l'élément dans la liste déroulante. OptionScaption est utile lorsque vous ne souhaitez pas avoir une option prticulaire sélectionnée par défaut. Ce paramètre définit un texte tel que «Sélectionnez un élément…» en haut de la liste des options et affichez-le lorsqu'il n'y a aucun élément particulier sélectionné.

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

Et c'est tout pour cette partie, restez à l'écoute pour la finale, en même temps la semaine prochaine!

Les questions fréquemment posées sur les knockoutjs

Quelle est la différence entre les knockoutjs et d'autres bibliothèques JavaScript?

knockoutjs est une bibliothèque JavaScript qui aide les développeurs à créer des interfaces d'utilisateurs d'affichage et d'éditeur riches et réactives avec un modèle de données sous-jacent propre. Contrairement à d'autres bibliothèques JavaScript, KnockoutJS utilise un modèle de conception de mode View-ViewModel (MVVM) où le modèle et la vue sont séparés, ce qui facilite la gestion des interfaces complexes basées sur les données. It also provides automatic UI refresh when the data model changes and offers declarative bindings for connecting parts of the UI to the data model.

How does KnockoutJS handle data binding?

KnockoutJS uses a system of liaisons déclaratives pour connecter des parties de l'interface utilisateur au modèle de données. Cela signifie que vous pouvez facilement lier des données aux éléments HTML d'une manière facile à comprendre et à entretenir. Lorsque le modèle de données change, KnockoutJS met automatiquement à jour les parties pertinentes de l'interface utilisateur, éliminant le besoin de manipulation manuelle DOM.

Les KnockoutJ peuvent fonctionner avec d'autres bibliothèques JavaScript?

Oui, les knockoutj peuvent fonctionner aux côtés d'autres bibliothèques JavaScript. Il ne fait aucune hypothèse sur le reste de votre pile technologique, il peut donc être intégré à d'autres bibliothèques ou frameworks tels que jQuery, bootstrap ou même angularjs.

Comment les knockoutjs gèrent-ils la liaison CSS?

knockoutjs fournit une liaison 'CSS' qui vous permet d'ajouter ou de supprimer une ou plusieurs classes CSS nommées à l'élément DOM associé. Cette liaison est particulièrement utile lorsque vous souhaitez appliquer conditionnellement une classe CSS à un élément basé sur une condition de données.

Que sont les observables dans knockoutjs?

Les observables sont des objets JavaScript spéciaux qui peuvent informer les abonnés sur les modifications et détecter automatiquement les dépendances. Cette fonctionnalité est fondamentale pour KnockoutJS, car elle permet à la bibliothèque de mettre à jour automatiquement les bonnes parties de l'interface utilisateur chaque fois que le modèle de données change.

Comment puis-je utiliser KnockoutJs avec les technologies côté serveur?

Knockoutjs peut être utilisé avec n'importe quelle technologie côté serveur. Il est agnostique pour le langage côté serveur que vous utilisez, vous pouvez donc l'utiliser avec PHP, .NET, Java, Ruby, Python ou tout autre langage côté serveur. Il vous suffit d'envoyer des données JSON au client, puis d'utiliser KnockOutJS pour lier ces données à votre HTML.

Comment les knockoutjs gèrent-ils la validation du formulaire?

knockoutjs lui-même ne fournit pas de l'intégration intégrée? Mécanismes de validation. Cependant, il peut être facilement intégré à d'autres bibliothèques de validation telles que la validation JQuery ou la validation de knockout, un plugin séparé spécialement conçu pour la validation de la forme dans KnockoutJs.

Puis-je utiliser KnockoutJS pour le développement d'applications mobiles?

Bien que KnockoutJs soit principalement conçu pour le développement Web, il peut également être utilisé dans le développement d'applications mobiles en combinaison avec d'autres technologies comme PhoneGap ou Cordova, qui vous permettent de Créez des applications natives à l'aide de HTML, CSS et JavaScript.

Comment les knockoutjs gèrent la gestion des événements?

knockoutjs fournit une liaison «cliquez» qui vous permet de répondre à l'événement de clic de l'utilisateur. Il fournit également d’autres liaisons d’événements telles que «événement», «soumettre», «activer», «désactiver», «hasfocus», etc. Ces liaisons facilitent la gestion des interactions des utilisateurs de manière déclarative.

Les KnockoutJ sont-ils adaptés aux applications à grande échelle?

Oui, KnockoutJS convient aux applications à petite et à grande échelle. Son modèle de conception MVVM facilite la gestion des interfaces complexes basées sur les données, et son système d'observables et de liaisons aide à maintenir le code organisé et maintenu, même pour les grandes applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!