KnockoutJS - avec reliure

Cette liaison est utilisée pour lier les éléments enfants d'un objet dans le contexte de l'objet spécifié. Cette liaison peut également être imbriquée avec d'autres types de liaisons telles que if et foreach.

Syntax

with: <binding-object>

Parameters

  • Passez l'objet que vous souhaitez utiliser comme contexte pour la liaison des éléments enfants en tant que paramètre. Les éléments enfants ne seront pas affichés si l'objet ou l'expression transmis est évalué comme étant nul ou non défini.

  • L'expression sera réévaluée si le paramètre fourni est observable. En conséquence, les éléments enfants seront retraités en fonction du résultat de contexte actualisé.

Example

Jetons un œil à l'exemple suivant qui montre l'utilisation de with binding.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS with binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h1 data-bind = "text: siteName"> </h1>
      
      <table border = "1">
         <thead>
            <th>Course Name</th><th>Fees</th><th> Start Date</th>
         </thead>
         
         <tbody data-bind = "with: courses ">
            <tr>
               <td><span data-bind = "text: courseName"></span></td>
               <td><span data-bind = "text: Fees"></span></td>
               <td><span data-bind = "text: startDate"> </span></td>
            </tr>
         </tbody>
      </table>

      <script type="text/javascript">
         function AppViewModel() {
            self = this;
            self.siteName = ko.observable( 'TutorialsPoint');
            self.courses = ko.observable ({
               courseName:  'Microsoft .Net', 
               Fees: 20000, startDate: '20-Mar-2016'
            });
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans with-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

Observations

Sans conteneur avec

Il peut y avoir une situation où il n'est pas possible de placer une liaison de données dans un élément DOM. La liaison essentielle peut encore être effectuée à l'aide decontainer-less syntaxe basée sur les balises de commentaire, comme indiqué dans le code suivant.

<ul>
   <li>Course Info</li>
   <!-- ko with: currentClasses -->
      ...
   <!-- /ko -->
   <!-- ko with: plannedClasses -->
      ...
   <!-- /ko -->
</ul>

Les <! - ko -> et <! - / ko -> fonctionnent comme des marqueurs de début et de fin, ce qui en fait une syntaxe virtuelle et lie les données comme s'il s'agissait d'un vrai conteneur.