KnockoutJS - con rilegatura

Questa associazione viene utilizzata per associare gli elementi figlio di un oggetto nel contesto dell'oggetto specificato. Questo legame può anche essere annidato con altri tipi di associazioni come if e foreach.

Syntax

with: <binding-object>

Parameters

  • Passa l'oggetto che desideri utilizzare come contesto per associare elementi figlio come parametro. Gli elementi figlio non verranno visualizzati se l'oggetto o l'espressione passata viene valutata come null o non definita.

  • L'espressione sarà rivalutata, se il parametro fornito è osservabile. Di conseguenza, gli elementi figlio verranno rielaborati in base al risultato del contesto aggiornato.

Example

Diamo uno sguardo al seguente esempio che dimostra l'uso di 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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato with-bind.htm file.

  • Apri questo file HTML in un browser.

Osservazioni

Senza container con

Potrebbe esserci una situazione in cui non è possibile inserire l'associazione dati all'interno di un elemento DOM. La rilegatura essenziale può ancora essere eseguita con l'aiuto dicontainer-less sintassi basata sui tag di commento come mostrato nel codice seguente.

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

<! - ko -> e <! - / ko -> funzionano come marcatori di inizio e fine rendendola una sintassi virtuale e vincolano i dati come se fosse un vero contenitore.