KnockoutJS - com ligação

Essa associação é usada para ligar os elementos filhos de um objeto no contexto do objeto especificado. Essa ligação também pode ser aninhada com outros tipos de ligações, como if e foreach.

Syntax

with: <binding-object>

Parameters

Passe o objeto que você deseja usar como contexto para vincular elementos filhos como o parâmetro. Os elementos filho não serão mostrados se o objeto ou a expressão passada for avaliada como nula ou indefinida.
A expressão será reavaliada, se o parâmetro fornecido for observável. Da mesma forma, os elementos filhos serão reprocessados com base no resultado do contexto atualizado.

Example

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso de com vinculação.

<!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

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código acima em with-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.

Observações

Sem contêiner com

Pode haver uma situação em que não seja possível colocar a vinculação de dados dentro de um elemento DOM. A ligação essencial ainda pode ser realizada com a ajuda decontainer-less sintaxe baseada nas tags de comentário, conforme mostrado no código a seguir.

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

O <! - ko -> e <! - / ko -> funcionam como marcadores de início e fim, tornando-se uma sintaxe virtual e vinculando os dados como se fossem um contêiner real.

↰ Previous page