Guide des débutants sur les knockoutjs: partie 3

Les plats clés

• Utilisez la liaison `foreach` dans knockoutjs pour dupliquer automatiquement et lier des sections de balisage pour chaque élément dans un tableau, telles que la génération de lignes de table ou la liste des éléments en fonction des données du tableau.
• Tirez parti des pseudovariables comme «$ data», «$ parent», «$ parents» et «$ root» dans les liaisons imbriquées pour accéder et manipuler efficacement les données de différents niveaux de la hiérarchie du modèle de vue.
• Implémentez les liaisons `` if` et 'avec' pour rendre conditionnellement les sections de votre interface utilisateur et établir de nouveaux contextes de liaison, améliorant le dynamisme et la lisibilité de votre application.
• Explorez les capacités de modèles de knockoutjs, qui permettent à la fois des modèles natifs à l'aide de liaisons de flux de contrôle et de scénarios avancés en utilisant la liaison `` modèle 'avec des options pour passer des paramètres et rappels supplémentaires.
• Étendez les observables à élimination directe et créez des liaisons personnalisées pour encapsuler des comportements et des interactions complexes, fournissant des solutions réutilisables qui maintiennent des bases de code propres et gérables.

Un guide des débutants pour knockoutjs: modèles et plus

Il y a quatre liaisons de flux de contrôle: foreach, si, ifnot et avec. Ces liaisons de contrôle vous permettent de définir de manière déclarative la logique de flux de contrôle sans créer un modèle nommé comme vous le verrez ci-dessous.

La liaison foreach double une section de balisage pour chaque entrée dans un tableau et lie chaque copie de cette majoration à l'élément de tableau correspondant. Cela convient aux listes ou aux tables de rendu. Si votre tableau est un tableau observable, chaque fois que vous ajoutez ou supprimez plus tard les entrées du tableau, la liaison mettra à jour l'interface utilisateur pour correspondre en insérant ou en supprimant plus de copies des éléments de liste ou des lignes de table, sans affecter d'autres éléments DOM. Voir l'exemple suivant:

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

Ici, une ligne de table sera créée automatiquement pour chaque entrée de tableau dans le tableau des livres.

Parfois, vous devrez peut-être vous référer à l'entrée du tableau elle-même plutôt qu'à une seule de ses propriétés. Dans ce cas, vous pouvez utiliser les données pseudovariables $. Cela signifie «l'élément actuel», lorsque vous êtes utilisé dans un bloc foreach.

<ul data-bind="foreach: daysOfWeek">
 <li>
 <span data-bind="text: $data"></span>
 </li>
</ul>

<script type="text/javascript">
function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
   'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
};

ko.applyBindings(new viewModel());
</script>

Cela répertorie tous les jours de la semaine sans avoir besoin de répéter le code pour chaque élément séparément.

Dans KO, vous pouvez nicher autant de liaisons de flux de contrôle que vous le souhaitez. Et lorsque vous faites cela, il est souvent souhaitable de remonter la hiérarchie et d'accès aux données ou aux fonctions à partir des contextes parents. Dans de tels cas, vous pouvez utiliser les pseudovariables suivantes:

$ parent - représente l'élément de données en dehors du bloc foreach actuel

$ parents - est un tableau représentant des éléments de données de toutes les portées de flux de contrôle extérieur. $ Parents [0] est le même que $ parent. $ Parents [1] représente l'article de la portée des débits de contrôle des grands-parents, et ainsi de suite.

$ root - représente l'élément de la portée de contrôle de contrôle la plus extérieure. Il s'agit généralement de votre objet de modèle de vue de niveau supérieur.

Dans l'exemple suivant, nous utilisons la pseudovariable $ Parent afin de supprimer correctement un élément de livre du tableau des livres:

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

Dans certains cas, vous voudrez peut-être dupliquer une section de balisage, mais vous n'avez aucun élément de conteneur sur lequel mettre une liaison foreach. Ensuite, vous pouvez utiliser la syntaxe suivante:

<ul data-bind="foreach: daysOfWeek">
 <li>
 <span data-bind="text: $data"></span>
 </li>
</ul>

<script type="text/javascript">
function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
   'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
};

ko.applyBindings(new viewModel());
</script>

Dans cet exemple, vous ne pouvez pas utiliser une liaison foreach normale. Si vous le placez sur le

, cela reproduira l'élément d'en-tête, et si vous souhaitez mettre un autre conteneur à l'intérieur du
, vous ne pouvez pas parce que seuls
• Les éléments sont autorisés à l'intérieur des
  . La solution consiste à utiliser la syntaxe de flux de contrôle sans conteneur où les commentaires et

  La liaison IF fait apparaître une section de balisage dans votre document, seulement si une expression spécifiée évalue à True. Ensuite, le balisage contenu sera présent dans le document, et tous les attributs de liaison de données seront appliqués. D'un autre côté, si votre expression évalue False, le balisage contenu sera supprimé de votre document sans appliquer d'abord de liaisons.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  Le avec la liaison crée un nouveau contexte de liaison, de sorte que les éléments descendants sont liés dans le contexte d'un objet spécifié. L'objet que vous souhaitez utiliser comme contexte pour lier des éléments descendant. Si l'expression que vous fournissez évalue à Null ou non définie, les éléments descendants ne seront pas du tout liés, mais seront plutôt supprimés du document. Le avec la liaison modifie le contexte des données à n'importe quel objet que vous spécifiez. Ceci est particulièrement utile pour traiter les graphiques d'objets avec plusieurs relations parent / enfant.

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  Templage

  La liaison de la matrice remplit l'élément DOM associé aux résultats du rendu d'un modèle. Les modèles sont un moyen simple et pratique de construire des structures d'interface utilisateur sophistiquées - peut-être avec des blocs répétitifs ou imbriqués - en fonction de vos données de modèle de vue. Il existe deux principales façons d'utiliser des modèles. Le premier, les modèles natifs, est le mécanisme qui sous-tend Forach, IF, avec et d'autres liaisons de flux de contrôle. En interne, ces liaisons de flux de contrôle capturent le balisage HTML contenu dans votre élément et l'utilisent comme modèle pour rendre un élément de données arbitraire. Cette fonctionnalité est intégrée à KO et ne nécessite aucune bibliothèque externe. Vous pouvez voir le schéma de base pour créer un modèle ici:

  <label><input type="checkbox" data-bind="checked: showList" />Show me list</label>
  <ul data-bind="if: showList">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  
  <script type="text/javascript">
     function viewModel() {
      var self = this;
      self.showList = ko.observable(false);
     }
    ko.applyBindings(new viewModel());    
  </script>

  Dans l'exemple suivant, vous pouvez voir comment l'utiliser en action:

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  Ici, nous devons utiliser un ID égal au nom du modèle afin de lier le modèle au reste de notre balisage. Dans ce cas, c'est «Book-Template».

  Au lieu d'utiliser la syntaxe courte décrite ci-dessus, nous pouvons transmettre plus de paramètres à la liaison du modèle, ce qui nous donnera un contrôle plus précis sur la sortie finale.

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  Ici, le nom est l'ID de l'élément qui contient le modèle que vous souhaitez rendre; Les données sont un objet à fournir comme données pour le modèle à rendre; Et le Sender Sender est une fonction de rappel à invoquer par rapport aux éléments DOM rendus.

  L'exemple suivant est un équivalent d'une liaison foreach. Ici, ForEach est passé sous forme de paramètre à la liaison du modèle.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  Vous pouvez obtenir exactement le même résultat en incorporant un modèle anonyme directement à l'intérieur de l'élément dans lequel vous utilisez la liaison pour la liaison:

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  La deuxième façon d'utiliser des modèles est de connecter le knockout à un moteur de modèle tiers. Le knockout transmettra vos valeurs de modèle au moteur de modèle externe et injectera la chaîne de balisage résultante dans votre document. Pour des exemples qui utilisent le jQuery.tmpl et traitant des moteurs de modèle Vérifiez la documentation.

  Extension des observables

  Les observables à élimination directe fournissent les fonctionnalités de base nécessaires pour prendre en charge les valeurs de lecture / écriture et la notification des abonnés lorsque cette valeur change. Dans certains cas, cependant, vous souhaiterez peut-être ajouter des fonctionnalités supplémentaires à un observable comme l'ajout de propriétés supplémentaires à l'observable. Les extensibles knockout offrent un moyen facile et flexible de faire exactement cela.

  La création d'un extenseur implique l'ajout d'une fonction à l'objet KO.Extenders. La fonction prend l'observable lui-même comme le premier argument et toutes les options du deuxième argument. Il peut ensuite retourner l'observable ou renvoyer quelque chose de nouveau comme un observable calculé qui utilise l'observable d'origine d'une manière ou d'une autre.

  Maintenant, nous allons créer une extension observable qui ajoutera la possibilité d'afficher un message d'indice.

  <label><input type="checkbox" data-bind="checked: showList" />Show me list</label>
  <ul data-bind="if: showList">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  
  <script type="text/javascript">
     function viewModel() {
      var self = this;
      self.showList = ko.observable(false);
     }
    ko.applyBindings(new viewModel());    
  </script>

  liaisons personnalisées

  Les liaisons intégrées du KO vous permettent de gérer la plupart Voie facile à utiliser. Par exemple, vous pouvez créer des composants interactifs comme les grilles, les tabsets, etc., sous la forme de liaisons personnalisées.

  Les liaisons à élimination directe sont constituées de deux méthodes: init et mise à jour. La création d'une liaison est aussi simple que la création d'un objet avec ces deux méthodes et l'enregistrement de cet objet avec KO à l'aide de KO.BindingHandlers comme indiqué ci-dessous.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  La fonction init fonctionnera uniquement la première fois que la liaison est évaluée pour cet élément. Ceci est généralement utilisé pour exécuter un code d'initialisation unique ou pour câbler les gestionnaires d'événements qui vous permettent de mettre à jour votre modèle de vue en fonction d'un événement déclenché dans votre interface utilisateur.

  La fonction de mise à jour fournit un moyen de répondre lorsque les observables associés sont modifiés. En règle générale, cela est utilisé pour mettre à jour votre interface utilisateur en fonction des modifications de votre modèle de vue.

  Les fonctions init et mise à jour sont fournies quatre paramètres. Généralement, vous voudrez vous concentrer sur l'élément et les paramètres ValueAccessor, car ils sont le moyen standard de relier votre modèle de vue à votre interface utilisateur. Vous n'avez pas vraiment à fournir des rappels init et met à jour - vous pouvez simplement en fournir l'un ou l'autre si c'est tout ce dont vous avez besoin.

  Le paramètre de l'élément vous donne un accès direct à l'élément DOM qui contient la liaison.

  Le paramètre ValueAccessor est une fonction qui vous donne accès à ce qui a été passé à la liaison. Si vous avez passé un observable, le résultat de cette fonction sera aussi observable (pas la valeur de celui-ci). Si vous avez utilisé une expression dans la liaison, le résultat du ValueAccessor sera le résultat de l'expression.

  Le paramètre AllBindingsAccessor vous donne accès à toutes les autres liaisons qui ont été répertoriées dans le même attribut Data-Bind. Ceci est généralement utilisé pour accéder à d'autres liaisons qui interagissent avec cette liaison. Ces liaisons n'auront probablement pas de code qui leur sont associées et ne sont qu'un moyen de transmettre des options supplémentaires à la liaison, sauf si vous choisissez de passer un objet avec plusieurs propriétés dans votre liaison principale. Par exemple, OptionsValue, OptionSText et OptionScaption sont des liaisons qui ne sont utilisées que pour transmettre les options à la liaison des options.

  Le paramètre ViewModel permettra d'accéder à votre modèle de vue global pour les liaisons en dehors des modèles. À l'intérieur d'un modèle, cela sera défini sur les données liées au modèle. Par exemple, lors de l'utilisation de l'option foreach de la liaison du modèle, le paramètre ViewModel serait défini sur le membre du tableau actuel envoyé via le modèle. La plupart du temps, le ValueAccessor vous fournira les données que vous souhaitez, mais le paramètre ViewModel est particulièrement utile si vous avez besoin d'un objet pour être votre cible lorsque vous appelez / appliquez des fonctions.

  Dans l'exemple suivant, nous créerons une liaison personnalisée qui met à l'échelle une TextArea lorsqu'elle est mise au point.

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  Tout d'abord, dans la fonction INIT, nous déclarons que lorsque l'élément est mis au point, sa valeur sera définie sur true, et vice versa. Ensuite, dans la fonction de mise à jour, nous utilisons le paramètre AllBindingAccessor pour ajouter des options supplémentaires à notre liaison - échelle et à l'échelle. Nous utilisons le ko.utils.unwrapobservable pour obtenir la valeur de la liaison actuelle et vérifier s'il est défini sur true. Si c'est le cas, l'élément DOM est mis à l'échelle, sinon il est réduit.

  Voyons enfin un exemple qui combine les indices extension observable et la liaison personnalisée ScaleonFocus:

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  Vous pouvez placer les indices observables et la liaison ScaleonFocus dans un fichier séparé, puis les inclure dans le fichier principal. Cela rend le code modulaire et vous permet de le réutiliser quand vous le souhaitez.

  c'est tout, les amis! J'espère que vous avez apprécié cette série. Maintenant, vous avez toutes les connaissances nécessaires pour commencer et continuer à apprendre et à expérimenter le knockout. Pour des exemples et des tutoriels plus complets, vous pouvez accéder au site à élimination directe, ce que je vous suggère de faire.

  Les questions fréquemment posées sur les knockoutjs

  Quel est le but de ko.utils.unwrapobserable dans knockoutjs?

  La fonction ko.utils.unwrapobserable dans knockoutjs est utilisée pour récupérer la valeur actuelle d'une observable ou non observable. Cette fonction est particulièrement utile lorsque vous ne savez pas si vous avez affaire à un observable ou un non-observable. Il vous permet de gérer les deux cas sans avoir à écrire un code séparé pour chacun. Cette fonction fait partie des fonctions utilitaires de knockoutjs qui fournissent des fonctionnalités supplémentaires pour faciliter le travail avec les observables.

  Comment la liaison foreach fonctionne-t-elle dans knockoutjs?

  La liaison foreach dans les knockoutjs est utilisée pour se lier pour se lier un éventail d'articles à une section de votre HTML. Il reproduit l'élément DOM associé et ses descendants pour chaque élément du tableau, créant une boucle. Ceci est particulièrement utile lorsque vous souhaitez afficher une liste d'éléments dans votre interface utilisateur. La liaison foreach fournit également un contexte pour chaque itération, vous permettant d'accéder à l'élément actuel à l'aide du mot clé de données $.

  Quel est le plugin de mappage dans knockoutjs?

  Le plugin de cartographie dans knockoutjs est Un utilitaire qui vous aide à convertir vos objets JSON en objets observables. Cela est particulièrement utile lorsque vous travaillez avec les données d'un serveur. Le plugin de mappage vous permet de mapper facilement vos données sur votre modèle de vue, et il offre également des options pour personnaliser le processus de mappage.

  Comment puis-je travailler avec les collections dans knockoutjs?

  Travailler avec des collections avec des collections Dans Knockoutjs, est facilité à l'aide de tableaux observables. Les tableaux observables sont des types spéciaux d'observables qui détiennent un tableau de valeurs. Ils fournissent des fonctions pour manipuler le tableau tel que Push, Pop, Shift, Unhipt, Inverse, Trie et Splice. Les tableaux observables informent également les abonnés lorsque les éléments sont ajoutés ou supprimés, ce qui facilite la synchronisation de votre interface utilisateur avec vos données.

  J'ai trouvé un problème dans KnockoutJS, où puis-je le signaler?

  Si vous avez trouvé un problème dans knockoutjs, vous pouvez le signaler sur la page knockoutjs github. Avant de signaler un problème, c'est une bonne idée de vérifier si le problème a déjà été signalé par quelqu'un d'autre. Si ce n'est pas le cas, vous pouvez créer un nouveau problème et fournir autant de détails que possible pour aider l'équipe KnockoutJS à comprendre et à résoudre le problème.

  Comment puis-je utiliser des observables calculés dans knockoutjs?

  Les observables calculés dans les knockoutjs 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 change. Les observables calculés sont utiles lorsque vous souhaitez combiner ou manipuler des observables d'une manière ou d'une autre. Pour créer un observable calculé, vous pouvez utiliser la fonction ko.computed.

  comment puis-je gérer les événements dans knockoutjs?

  knockoutjs fournit un certain nombre de liaisons pour gérer des événements tels que Click, Soumettre, Focus, entre autres. Ces liaisons vous permettent de spécifier une fonction JavaScript à exécuter lorsque l'événement associé se produit. La fonction peut faire partie de votre modèle de vue ou une fonction autonome.

  Comment puis-je utiliser des liaisons personnalisées dans knockoutjs?

  Les liaisons personnalisées dans les knockoutjs vous permettent de créer vos propres liaisons qui peuvent être utilisé comme les reliures intégrées. Ceci est particulièrement utile lorsque vous souhaitez créer des fonctionnalités réutilisables. Pour créer une liaison personnalisée, vous pouvez utiliser l'objet KO.BindingHandlers.

  Comment puis-je déboguer les applications knockoutjs?

  Les applications knockoutjs de débogage peuvent être effectuées à l'aide des outils de développeur du navigateur. Vous pouvez utiliser Console.log pour imprimer des valeurs, ou utiliser des points d'arrêt pour interrompre l'exécution et inspecter l'état actuel de votre application. Knockoutjs fournit également la fonction ko.tojson, qui peut être utilisée pour convertir votre modèle de vue en une chaîne JSON pour une inspection facile.

  Comment puis-je tester les applications knockoutJ fait à l'aide de cadres de test JavaScript tels que le jasmin ou le moka. Ces frameworks vous permettent d'écrire des tests unitaires pour vos modèles de vue, garantissant qu'ils se comportent comme prévu. Lorsque vous testez les applications knockoutjs, c'est une bonne idée de séparer autant que possible vos modèles de vue du DOM, pour faciliter les tests.

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!