KnockoutJS - con enlace

Este enlace se utiliza para enlazar los elementos secundarios de un objeto en el contexto del objeto especificado. Este enlace también se puede anidar con otro tipo de enlaces como if y foreach.

Syntax

with: <binding-object>

Parameters

Pase el objeto que desea usar como contexto para vincular elementos secundarios como parámetro. Los elementos secundarios no se mostrarán si el objeto o la expresión pasada se evalúa como nulo o indefinido.
La expresión se volverá a evaluar si el parámetro proporcionado es observable. En consecuencia, los elementos secundarios se volverán a procesar en función del resultado del contexto actualizado.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso de con enlace.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en with-bind.htm archivo.
Abra este archivo HTML en un navegador.

Observaciones

Sin contenedor con

Puede haber una situación en la que no sea posible colocar el enlace de datos dentro de un elemento DOM. La unión esencial aún se puede realizar con la ayuda decontainer-less sintaxis basada en las etiquetas de comentario como se muestra en el siguiente código.

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

<! - ko -> y <! - / ko -> funcionan como marcadores de inicio y fin, lo que la convierte en una sintaxis virtual y enlaza los datos como si fuera un contenedor real.

↰ Previous page