Guide des débutants sur les knockoutjs: partie 1

Les plats clés

• knockoutjs est une bibliothèque JavaScript qui simplifie la création d'UIS Web riches en forme de bureau. Il offre un mécanisme de liaison bidirectionnel simple pour relier un modèle de données à une interface utilisateur, ce qui facilite la synchronisation entre eux.
• knockout utilise le modèle de conception du modèle de vue du modèle de vue (MVVM), divisant votre application en trois parties: un modèle qui contient les données de votre application, une vue qui sert de connecteur et de couche de communication entre le modèle et la vue, et un Voir qui fait référence à tous les éléments d'interface utilisateur de votre application.
• knockoutjs est construit sur trois concepts de base: liaisons déclaratives, suivi de dépendance et modèles. Les liaisons déclaratives connectent des parties de votre interface utilisateur à votre modèle de données. Le suivi des dépendances utilise des liaisons et des variables spéciales appelées «observables» pour mettre à jour toutes les pièces associées à un modèle de données lorsqu'elle change. Les modèles sont utiles pour afficher une riche structure de données de modèle de vue tout en gardant votre code simple.
• Les observables sont des objets JavaScript spéciaux utilisés dans les knockoutjs qui peuvent informer les abonnés des modifications et détecter automatiquement les dépendances. Cela permet à la vue de mettre à jour automatiquement chaque fois que le modèle change, sans avoir à manipuler manuellement le dom.

Un guide des débutants sur les knockoutjs: bases et observables

Presque tous ceux qui traitent avec les technologies Web connaissent JQuery, ou du moins en ont entendu parler. Sa simplicité et sa concision inégalées facilitent la vie de millions de développeurs Web du monde entier - et c'est fantastique.

Malheureusement, jQuery n'est pas une solution pour chaque problème. Dès que vous décidez de créer des applications Web plus complexes que vous rencontrez un problème - il n'y a pas de moyen facile de faire en sorte que votre interface utilisateur et vos données se communiquent dynamiquement. Avec la manipulation DOM de bas niveau et la gestion des événements fournis par jQuery, c'est assez difficile à réaliser. Vous avez besoin d'une bibliothèque vous fournissant un mode de communication plus sophistiqué entre votre interface utilisateur et le modèle de données sous-jacent.

Et c'est là que le knockout entre en jeu. Le knockout est une bibliothèque JavaScript qui aide la création de riches internes Web de type de bureau. Il simplifie les interactions utilisateur et rend les interfaces entièrement sensibles à toute modification de la source de données. Le knockout fournit un mécanisme de liaison bidirectionnel simple pour lier un modèle de données à une interface utilisateur, ce qui rend la synchronisation entre eux une brise.

Bien que vous deviez utiliser KO avec jQuery en même temps, dans certains cas comme les transitions animées, le knockout lui-même n'en dépend pas. Une autre chose que vous devez comprendre est que le knockout ne rivalise pas avec jQuery - ils font tous les deux un excellent travail; chacun dans sa propre direction. Comme vous le verrez si vous souhaitez obtenir le plus d'avantages que vous devez les utiliser ensemble.

Dans ce tutoriel, nous commençons par les concepts et les capacités de base du knockout. Dans la deuxième partie, nous allons approfondir l'exploration des liaisons intégrées et comment les utiliser. Et dans la finale, nous passerons par quelques fonctionnalités et techniques avancées, telles que des observables étendus et comment créer vos propres liaisons personnalisées. Commençons!

concepts de base

Avant de passer par les exemples de code, vous devrez peut-être d'abord saisir certains concepts de base. Le knockout implémente le modèle de conception du modèle de vue du modèle (MVVM) pour JavaScript. Dans ce modèle, votre application est divisée en trois parties:

un modèle qui contient les données de votre application. Cela peut être des données saisies par les utilisateurs ou les données JSON obtenues à partir d'un serveur Web.

Une vue qui sert de connecteur et de couche de communication entre le modèle et la vue. Il contient des données et des opérations pour manipuler ces données et les afficher dans l'interface utilisateur. Chaque fois que le modèle de données est modifié correspondait à des mises à jour de pièces d'interface utilisateur, reflétant ces modifications. Le modèle d'affichage dans votre application est représenté par le code JavaScript.

Une vue qui fait référence à tous les éléments d'interface utilisateur de votre application. Il s'agit d'une représentation de la structure et de l'apparence pour une interface utilisateur donnée. La vue est responsable de l'affichage des données et de l'acceptation des entrées utilisateur. La vue est représentée par le code HTML / CSS dans votre application.

Ce sont trois concepts de base lors de la mise à mort:

1. Resseaux déclaratifs: ceux-ci vous permettent de connecter des parties de votre interface utilisateur à votre modèle de données de manière simple et pratique. Lorsque vous utilisez JavaScript directement pour manipuler DOM, cela peut provoquer un code brisé si vous modifiez plus tard la hiérarchie DOM ou les ID d'élément. Avec les liaisons déclaratives même si vous modifiez le DOM toutes les pièces liées restent connectées. Vous pouvez lier les données à un DOM en incluant simplement un attribut de données de données à n'importe quel élément DOM.

2. Suivi de dépendance: heureusement aux liaisons et au type spécial de variables appelées observables à chaque fois que vos données de modèle ont changé toutes les pièces qui y sont associées à la mise à jour automatiquement. Pas besoin de s'inquiéter d'ajouter des gestionnaires d'événements et des auditeurs. Tout ce travail supplémentaire est effectué en interne par knockout et observables, qui informe les auditeurs lorsque les valeurs sous-jacentes ont changé.

3. Templage: Cela est utile lorsque votre application devient plus complexe et que vous avez besoin d'un moyen d'afficher une riche structure de données de modèle de vue, en gardant ainsi votre code simple. Le knockout a un moteur de modèle natif et intégré que vous pouvez utiliser immédiatement. Mais si vous le souhaitez, un moteur de modèle tiers, comme jQuery.tmpl ou souligner, peut également être utilisé.

Ne vous inquiétez pas si toute cette théorie vous semble obscure. Lorsque nous passons par le tutoriel et les exemples de code, tout deviendra plus clair.

Pour commencer

Avant de plonger dans le knockout, vous devez télécharger et référence à la bibliothèque dans votre document HTML.

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

pour garder votre code séparé de votre présentation, il est préférable de créer un fichier JavaScript pour maintenir tout le code d'application. Et parce que nous utiliserons jQuery dans certains cas, vous devez également le référencer.

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

Ceci est considéré comme la meilleure pratique, mais à des fins de formation et pour vous faciliter les choses, vous pouvez mettre le code JavaScript dans le même document en l'incluant dans la balise de tête ou en le placerant votre balisage.

Maintenant, pour créer un modèle de vue, déclarez simplement n'importe quel objet JavaScript comme ceci:

  function viewModel() {

   // Your code here
  
  };

L'attribut Data-Bind (expliqué plus loin) n'est pas originaire de HTML, et le navigateur ne sait pas ce que cela signifie. Ainsi, pour prendre effet, le knockout doit être activé en insérant la fonction ko.applybindings () à la fin du script. De plus, si vous utilisez un fichier javascript externe ou si votre script est placé dans la balise de tête de votre document, vous devez envelopper le code knockout dans une fonction JQuery Ready afin de fonctionner correctement. Voici le modèle de base à démarrer:

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

Appeler la méthode KO.ApplyBindings () et le passage de notre modèle de vue indique à KO pour lier le modèle spécifié à notre interface utilisateur. Vous pouvez même fournir un élément DOM si vous voulez uniquement lier ce modèle de vue à une partie de votre interface utilisateur globale. KO.ApplyBindings () prend deux paramètres. Le premier paramètre dit quel objet de vue de vue que vous souhaitez utiliser avec les liaisons déclaratives qu'il active. Le deuxième paramètre est facultatif et définit la partie du document que vous souhaitez rechercher les attributs de données de données. Par exemple, KO.ApplyBindings (ViewModel, document.getElementById («conteneur»)) restreindra l'activation à l'élément avec le conteneur ID et ses descendants. Ceci est utile si vous souhaitez avoir plusieurs modèles de vue et associer chacun à une région différente de la page.

comment cela fonctionne

Avec KO, vous pouvez lier des données à un élément DOM en incluant un attribut de données de données dans le balisage qui spécifie la liaison aux données à effectuer. Le code n'a jamais de référence à la structure DOM, vous pouvez donc changer librement le HTML sans rompre vos liaisons. Dans l'exemple suivant, nous ajoutons l'attribut de données de données de texte à Span Element comme ceci:

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

Ensuite, si nous voulons rendre la valeur du texte à des mises à jour dynamiquement, nous devons le déclarer dans notre modèle de vue comme observable.

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

Cela sortira «Le jour de la semaine est dimanche. Il est temps de se reposer ».

observables

knockout implémente les propriétés observables en enroulant les propriétés des objets avec une fonction personnalisée nommée ko.observable ().

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

Les observables sont définis en fonction. En tant que tel, vous pouvez les utiliser de la manière suivante:

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

Le knockout ne vous oblige pas à utiliser des propriétés observables. Si vous souhaitez que les éléments DOM reçoivent des valeurs une fois mais ne sont pas mis à jour lorsque les valeurs de l'objet source changent, les objets simples seront suffisants. Cependant, si vous voulez que vos éléments d'objet source et cible DOM restent en synchronisation - liaison bidirectionnelle - vous voudrez envisager d'utiliser des propriétés observables.

Dans certains cas, vous devrez peut-être combiner les valeurs de deux observables ou plus en une nouvelle valeur. Cela peut être fait avec des observables dits calculés. Les observables calculés sont des fonctions qui dépendent d'un ou plusieurs autres observables et mettront automatiquement à jour chaque fois que l'une de ces dépendances changera. La propriété calculée se met automatiquement à jour lorsque l'un des observables dont il dépend pour son changement d'évaluation. Dans l'exemple suivant, l'observable calculé nommé Fulldate se met à jour à chaque fois où un ou plusieurs des observables du jour, du mois et de l'année changent.

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

le ko.computed () prend un deuxième paramètre. Sans le passer, il n'aurait pas été possible de y faire référence. Afin de simplifier les choses, vous pouvez créer un soi variable, évitant ainsi l'ajout du deuxième paramètre. À partir de maintenant, nous utiliserons cette approche dans les exemples de code.

  function viewModel() {

   // Your code here
  
  };

Lorsque vous traitez avec un objet, vous pouvez facilement suivre les modifications à son tour en un observable. Mais que se passe-t-il si vous avez plusieurs objets? Dans de tels cas, le knockout a un objet spécial appelé ko.observableArray (), qui peut détecter et répondre aux changements de collection de choses. Cela permet à afficher et / ou à modifier plusieurs valeurs, par exemple, lorsque vous avez besoin de sections répétées d'interface utilisateur pour apparaître et disparaître lorsque des éléments sont ajoutés et supprimés.

Vous devez garder à l'esprit qu'un tableau observable suit les objets dans le tableau, pas l'état de ces objets. Le simple fait de mettre un objet dans un tableau observable ne rend pas toutes les propriétés de cet objet elles-mêmes observables. Si vous souhaitez que vous puissiez rendre ces propriétés observables, mais cela dépend totalement de vous. Un tableau observable suit simplement les objets qu'il détient, et informe les auditeurs lorsque les objets sont ajoutés ou supprimés.

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

Lorsque vous créez un tableau observable, vous pouvez le laisser vide ou le remplir avec certaines valeurs initiales. Dans l'exemple suivant, nous créons un tableau observable peuplé des jours de la semaine:

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

Comme vous pouvez le voir, pour lire et écrire un tableau à élimination directe, vous pouvez utiliser toutes les fonctions JavaScript natives. Mais le knockout a ses propres fonctions équivalentes que la syntaxe est un peu plus pratique:

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

Pour la liste complète des fonctions disponibles, vous pouvez consulter la documentation.

Si vous avez aimé lire ce post, vous aimerez l'apprentissage; L'endroit pour acquérir de nouvelles compétences et techniques de la maîtrise. Les membres ont un accès instantané à tous les livres électroniques de SitePoint et aux cours en ligne interactifs, comme la programmation JavaScript pour le Web.

Les questions fréquemment posées (FAQ) sur 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 fait référence aux données, la vue est la représentation visuelle des données, et le ViewModel est l'intermédiaire entre le modèle et la vue. Ce modèle permet une séparation claire des préoccupations, ce qui rend votre code plus facile à gérer et à tester.

Comment puis-je commencer avec KnockoutJs?

Pour commencer avec les knockoutjs, vous devez inclure le Bibliothèque knockoutjs dans votre fichier html. Vous pouvez le télécharger à partir du site Web officiel KnockoutJS ou l'inclure directement à partir d'un réseau de livraison de contenu (CDN). Une fois que vous avez inclus la bibliothèque, vous pouvez commencer à créer votre ViewModel et à le lier à votre vue à l'aide de la syntaxe knockoutjs.

Comment fonctionne la liaison des données dans KnockoutJS?

La liaison des données dans KnockoutJS est-elle Un moyen d'établir une connexion entre le modèle (vos données) et la vue (les éléments DOM de votre page Web). Cette connexion permet aux modifications de vos données de mettre à jour automatiquement la vue, et vice versa. Knockoutjs fournit plusieurs liaisons intégrées pour les tâches communes telles que la liaison au texte et à la valeur, et vous pouvez également créer des liaisons personnalisées pour des scénarios plus complexes.

Que sont les observables dans knockoutjs?

Les observables sont spéciaux Des objets JavaScript qui peuvent informer les abonnés des modifications et détecter automatiquement les dépendances. Dans knockoutjs, vous utilisez des observables pour mettre à jour automatiquement la vue chaque fois que le modèle change, sans avoir à manipuler manuellement le DOM. Cela rend votre code plus propre et plus facile à maintenir.

Comment utiliser les observables calculés dans knockoutjs?

Les observables calculés sont des fonctions qui dépendent d'un ou plusieurs autres observables et se mettent automatiquement à jour chaque fois L'une de ces dépendances change. Pour créer un observable calculé dans knockoutjs, vous utilisez la fonction ko.. Liaison pour vous permettre de répondre aux actions de l'utilisateur telles que des clics ou des pressions de touches. Dans votre ViewModel, vous définissez une fonction pour gérer l'événement, puis utilisez la liaison de l'événement dans votre vue pour connecter l'événement à votre fonction.

Quel est le rôle du ViewModel dans knockoutjs?

Le ViewModel dans knockoutjs est un objet JavaScript qui représente les données et les opérations sur une interface utilisateur. Il est chargé de maintenir l'état de la vue, de gérer les actions des utilisateurs et de mettre à jour le modèle lorsque cela est nécessaire. Le ViewModel n'est pas une représentation directe des données, mais plutôt une version spécialisée de celui-ci pour la vue.

Comment utiliser les modèles dans knockoutjs?

Les modèles de knockoutjs vous permettent de définir réutilisable Des morceaux de balisage qui peuvent être rendus avec différentes données. Vous pouvez définir un modèle à l'aide d'un élément de script avec le type «texte / html», puis utiliser le modèle de liaison pour rendre le modèle avec vos données.

Comment déboguer les applications knockoutjs?

Les applications de débogage knockoutjs peuvent être effectuées à l'aide des outils de développement du navigateur. Vous pouvez inspecter les données liées à un élément DOM à l'aide des fonctions ko.datafor et ko.contextfor. De plus, knockoutjs fournit la fonction ko.tojson, qui peut être utilisée pour convertir votre ViewModel en une chaîne JSON pour une inspection facile.

Puis-je utiliser KOCKOutJS avec d'autres bibliothèques JavaScript?

Oui, knockoutjs Peut être utilisé aux côtés d'autres bibliothèques JavaScript comme jQuery ou bootstrap. Knockoutjs ne manipule pas directement le DOM, mais met plutôt à jour la vue en fonction des modifications de ViewModel, donc elle n'interfère pas avec d'autres bibliothèques qui manipulent le dom.

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!