KnockoutJS - Templating

Templateé um conjunto de elementos DOM que podem ser usados repetidamente. A modelagem facilita a construção de aplicativos complexos devido à sua propriedade de minimizar a duplicação de elementos DOM.

Existem 2 maneiras de criar modelos.

Native templating- Este método oferece suporte às ligações de fluxo de controle, como foreach, with e if. Essas ligações capturam a marcação HTML existente no elemento e a usam como modelo para itens aleatórios. Nenhuma biblioteca externa é necessária para este modelo.
String-based templating- KO se conecta ao mecanismo de terceiros para passar valores de ViewModel para ele e injeta a marcação resultante no documento. Por exemplo, JQuery.tmpl e Underscore Engine.

Syntax

template: <parameter-value>

<script type = "text/html" id = "template-name">
   ...
   ...   // DOM elemets to be processed
   ...
</script>

Observe que type é fornecido como text/html no bloco de script para notificar KO que, não é um bloco executável, mas apenas um bloco de modelo que precisa ser renderizado.

Parameters

A combinação das seguintes propriedades pode ser enviada como valor de parâmetro para o modelo.

name - Isso representa o nome do modelo.
nodes- Isso representa uma matriz de nós DOM a serem usados como o modelo. Este parâmetro é ignorado se o parâmetro de nome for passado.
data - Isso nada mais é do que dados a serem mostrados por meio do modelo.
if - O modelo será veiculado se a condição fornecida resultar em um valor verdadeiro ou semelhante a verdadeiro.
foreach - Para servir o modelo em formato foreach.
as - Isso é apenas para criar um alias no elemento foreach.
afterAdd, afterRender, beforeRemove - Tudo isso para representar funções chamáveis a serem executadas dependendo da operação executada.

Observações

Renderizando um Template nomeado

Os modelos são definidos implicitamente pela marcação HTML dentro do DOM quando usados com associações de fluxo de controle. No entanto, se desejar, você pode fatorar os modelos em um elemento separado e, em seguida, referenciá-los pelo nome.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Named Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', data: friend1 }"></div>
      <div data-bind = "template: { name: 'friend-template', data: friend2 }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friend1 = { 
               name: 'Smith', 
               contactNumber: 4556750345, 
               email: '[email protected]' 
            };
            
            this.friend2 = { 
               name: 'Jack', 
               contactNumber: 6789358001, 
               email: '[email protected]' 
            };
         }

         var vm = new MyViewModel();
         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 template-named.htm Arquivo.
Abra este arquivo HTML em um navegador.
Aqui, o modelo de amigo é usado 2 vezes.

Usando "foreach" no modelo

A seguir está um exemplo de uso foreach parâmetro junto com o nome do modelo.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - foreach used with Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', foreach: friends }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = [
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
               { name: 'Lisa', contactNumber: 4567893131, email: '[email protected]' }
            ]
         }

         var vm = new MyViewModel();
         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 template-foreach.htm Arquivo.
Abra este arquivo HTML em um navegador.
Aqui, o controle foreach é usado na vinculação do modelo.

Criação de alias usando como palavra-chave para itens foreach

A seguir está como um alias pode ser criado para um item foreach -

<div data-bind = "template: { 
   name: 'friend-template', 
   foreach: friends, 
   as: 'frnz' 
}"></div>

Torna-se fácil referir-se a objetos pais de dentro de loops foreach criando um alias. Esse recurso é útil quando o código é complexo e aninhado em vários níveis.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - using alias in Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <ul data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends, 
         as: 'frnz' 
      }"></ul>

      <script type = "text/html" id = "friend-template">
         <li>
            <h3 data-bind = "text: name"></h3>
            <span>Contact Numbers</span>
            <ul data-bind = "template: { 
               name : 'contacts-template', 
               foreach:contactNumber, 
               as: 'cont'
            } "></ul>
            <p>Email-id: <span data-bind = "text: email"></span></p>
         </li>
      </script>

      <script type = "text/html" id = "contacts-template">
         <li>
            <p><span data-bind = "text: cont"></span></p>
         </li>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = ko.observableArray ( [
               { 
                  name: 'Smith', 
                  contactNumber: [ 4556750345, 4356787934 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Jack', 
                  contactNumber: [ 6789358001, 3456895445 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Lisa', 
                  contactNumber: [ 4567893131, 9876456783, 1349873445 ],  
                  email: '[email protected]' 
               }
            ]);
         }

         var vm = new MyViewModel();
         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 template-as-alias.htm Arquivo.
Abra este arquivo HTML em um navegador.
Alias é usado em vez do nome completo dos arrays.

Usando afterAdd, beforeRemove e afterRender

Existem situações em que uma lógica customizada extra precisa ser executada em elementos DOM criados pelo modelo. Nesse caso, os seguintes retornos de chamada podem ser usados. Considere que você está usando o elemento foreach, então -

afterAdd - Esta função é invocada quando um novo item é adicionado ao array mencionado em foreach.

beforeRemove - Esta função é chamada antes de remover o item de uma matriz mencionada em foreach.

afterRender - A função mencionada aqui é chamada toda vez que foreach é renderizado e novas entradas são adicionadas ao array.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Use of afterRender Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends , 
         afterRender: afterProcess
      }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
         <button data-bind = "click: $root.removeContact">remove </button>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            self = this;
            this.friends = ko.observableArray ([
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
            ])

            this.afterProcess = function(elements, data){
               $(elements).css({color: 'magenta' });
            }

            self.removeContact = function() {
               self.friends.remove(this);
            }
         }

         var vm = new MyViewModel();
         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 template-afterrender.htm Arquivo.
Abra este arquivo HTML em um navegador.
Aqui, a função afterProcess é executada sempre que foreach é renderizado.

Escolhendo o modelo dinamicamente

Se houver vários modelos disponíveis, um pode ser escolhido dinamicamente tornando o nome observableparâmetro. Portanto, o valor do modelo será reavaliado à medida que o parâmetro do nome muda e, por sua vez, os dados são renderizados novamente.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Dynamic Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: whichTemplate, 
         foreach: friends 
      }"></div>

      <script type = "text/html" id = "only-phon">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
      </script>

      <script type = "text/html" id = "only-email">
         <h3 data-bind = "text: name"></h3>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
   
            this.friends = ko.observableArray ([
               {
                  name: 'Smith', 
                  contactNumber: 4556750345, 
                  email: '[email protected]', 
                  active: ko.observable(true)
               },
               
               {
                  name: 'Jack', 
                  contactNumber: 6789358001, 
                  email: '[email protected]', 
                  active: ko.observable(false)
               },
            ]);

            this.whichTemplate = function(friends) {
               return friends.active() ? "only-phon" : "only-email";
            }
         }

         var vm = new MyViewModel();
         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 template-dynamic.htm Arquivo.
Abra este arquivo HTML em um navegador.
O modelo a ser usado é decidido de acordo com o valor do sinalizador ativo.

Usando motores externos baseados em string

Os modelos nativos funcionam perfeitamente com vários elementos de fluxo de controle, mesmo com blocos de código aninhados. O KO também oferece uma maneira de integração com a biblioteca de modelos externa, como o Underscore templating Engine ou JQuery.tmpl.

Conforme mencionado no site oficial, JQuery.tmpl não está mais em desenvolvimento ativo desde dezembro de 2011. Portanto, o modelo nativo KO é recomendado apenas em vez de JQuery.tmpl ou qualquer outro mecanismo de modelo baseado em string.

Por favor, consulte o site oficial para mais detalhes sobre isso.

↰ Previous page Next page ↱