KnockoutJS - vinculação de componente

Essa ligação é usada para inserir um componente em elementos DOM e passar os parâmetros opcionalmente. Essa ligação pode ser obtida das duas maneiras a seguir -

Sintaxe abreviada
Sintaxe completa

Sintaxe abreviada

Nesta abordagem, apenas o nome do componente é especificado sem especificar nenhum parâmetro.

Syntax

<div data-bind = 'component: "component-name"'></div>

O valor do parâmetro passado pode ser observável. Portanto, sempre que o observável mudar, a instância do componente antigo será descartada e a nova será criada de acordo com o valor do parâmetro atualizado.

Sintaxe completa

Essa abordagem aceita o parâmetro na forma de um objeto.

Syntax

<div data-bind = 'component: {
   name: "component-name",
   params: { param1: value1, param2:value2 ...}
}'></div>

O objeto é composto pelos dois itens a seguir -

name- Este é o nome do componente a ser inserido. Como mencionado anteriormente, isso pode ser observável.
params- Este é um objeto a ser passado para o componente. Geralmente, este será um objeto de valor-chave incluindo vários parâmetros. Na maioria das vezes, é recebido pelo construtor de um ViewModel.

Fluxo de Trabalho de Processamento de Componente

O diagrama a seguir explica o processo que ocorre quando um componente é injetado por vinculação de componente.

Vejamos o processo em detalhes -

Receive ViewModel factory and template from component loaders- O ViewModel e o modelo registrados são solicitados e recebidos pelo carregador padrão. Por padrão, este é um processo assíncrono.

Clone the component template- Nesta etapa, ocorre a clonagem do template de componente e sua inserção no elemento DOM. O conteúdo existente, se houver, será removido.

Instantiate a ViewModel if any- Nesta etapa, ViewModel é instanciado. Se ViewModel for fornecido como uma função construtora, então o KO chama.

new ViewModelName(params)

Se ViewModel for fornecido no formato de função de fábrica, ou seja, createViewModel, então KO chama.

createViewModel(params, yourcomponentInfo)

Aqui, yourcomponentInfo.element é o elemento onde o modelo é inserido.

Bind ViewModel to view- Neste estágio, ViewModel é vinculado a View. Se ViewModel não for fornecido, a vinculação será feita com os parâmetros mencionados na vinculação do componente.

Now component is ready- Nesta fase, o componente está pronto e em funcionamento. O componente fica de olho nos parâmetros observáveis, se houver, de modo a gravar os valores alterados.

Dispose the ViewModel if the component is lost- A função dispose do ViewModel é chamada, se o valor do nome da associação do componente for alterado de forma observável ou alguma associação do fluxo de controle remover o próprio contêiner do elemento DOM, que deveria conter a saída do componente. O descarte ocorre antes de qualquer recipiente de elemento ser removido do DOM.

Example

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

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Component binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h4>Component binding without parameters</h4>
      <div data-bind = 'component: "calculate-sum"'></div>

      <h4>Component binding passing parameters</h4>
      <div data-bind = 'component: {
         name: "calculate-sum",
         params: { number1: 2, number2: 3 }
      }'></div>

      <script>
         ko.components.register('calculate-sum', {
            
            viewModel: function(params) {
               this.number1 = ko.observable(params && params.number1);
               this.number2 = ko.observable(params && params.number2);

               this.result = ko.computed(function() {
                  var sum = Number(this.number1()) + Number(this.number2());
                  if ( isNaN(sum) )
                  sum = 0;
                  return sum;
               },this);
            },
            
            template: 'Enter Number One: <input data-bind = "value: number1" /> <br> <br>'+
               ' Enter Number Two: <input data-bind = "value: number2" /> <br> <br>'+
               ' Sum  = <span data-bind = "text: result" />'
         });

         ko.applyBindings();
      </script>
      
   </body>
</html>

Output

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

Salve o código acima em component-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Insira os números em ambas as caixas de texto e observe que a soma é calculada.

Observações

Componentes apenas de modelo

Os componentes podem ser criados sem ViewModel. O componente pode incluir apenas um modelo mostrado a seguir.

ko.components.register('my-component', {
   template: '<div data-bind = "text: productName"></div>'
});

E o DOM será semelhante a -

<div data-bind = 'component: {
   name: "my-component",
   params: { productName: someProduct.name }
}'></div>

Usando vinculação de componente sem elemento de contêiner DOM

Pode haver uma situação em que não seja possível inserir um componente no elemento DOM. A vinculação essencial ainda pode ser executada com a ajuda da sintaxe sem contêiner com base nas tags de comentário mostradas a seguir.

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.

Gerenciamento e descarte de memória

A função de descarte pode ser adicionada opcionalmente como parte do ViewModel. Se esta função estiver incluída, ela será chamada sempre que o componente for perdido ou o próprio elemento do contêiner for removido. É uma boa prática usar a função dispor para liberar recursos ocupados por objetos indesejados, que não podem ser coletados como lixo por padrão. A seguir estão alguns exemplos -

O método setInterval continuará em execução até que seja explicitamente limpo. clearInterval (handle) é usado para interromper este processo.
As propriedades do ko.computadas precisam ser eliminadas explicitamente. Caso contrário, eles ainda podem continuar recebendo notificações de seus observáveis subjacentes. O descarte manual pode ser evitado usando funções puramente computadas.
Certifique-se de usar o método dispose () na assinatura, caso contrário, ele continua disparando as alterações até ser descartado.
Os manipuladores de eventos personalizados criados em elementos DOM e criados dentro de createViewModel precisam ser descartados.

↰ Previous page