KnockoutJS - Observáveis

KnockoutJS baseia-se nos três conceitos importantes a seguir.

  • Observáveis ​​e rastreamento de dependência entre eles - os elementos DOM são conectados ao ViewModel por meio de 'vinculação de dados'. Eles trocam informações por meio de Observáveis. Isso automaticamente cuida do rastreamento de dependência.

  • Vinculações declarativas entre UI e ViewModel - os elementos DOM são conectados a ViewModel por meio do conceito de 'vinculação de dados'.

  • Templating para criar componentes reutilizáveis ​​- Templating fornece uma maneira robusta de criar aplicativos da web complexos.

Estudaremos os observáveis ​​neste capítulo.

Como o nome especifica, quando você declara um dado / propriedade de ViewModel como Observável, qualquer modificação de dados a cada vez é refletida automaticamente em todos os lugares em que os dados são usados. Isso também inclui a atualização das dependências relacionadas. KO cuida dessas coisas e não há necessidade de escrever código extra para fazer isso.

Usando Observable, torna-se muito fácil fazer a interface do usuário e ViewModel se comunicarem dinamicamente.

Sintaxe

Você só precisa declarar a propriedade ViewModel com a função ko.observable() para torná-lo observável.

this.property = ko.observable('value');

Exemplo

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso de Observable.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

A linha a seguir é para a caixa de entrada. Como pode ser visto, usamos o atributo data-bind para vincular o valor yourName ao ViewModel.

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

A linha a seguir apenas imprime o valor de yourName. Observe que aqui o tipo de vinculação de dados é o texto, pois estamos simplesmente lendo o valor.

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

Na linha a seguir, ko.observable fica de olho na variável yourName para qualquer modificação nos dados. Assim que houver uma modificação, os locais correspondentes também serão atualizados com o valor modificado. Quando você executa o código a seguir, uma caixa de entrada aparecerá. Conforme e quando você atualiza essa caixa de entrada, o novo valor será refletido ou atualizado nos locais onde quer que seja usado.

this.yourName = ko.observable("");

Resultado

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

  • Salve o código acima em first_observable_pgm.htm Arquivo.

  • Abra este arquivo HTML em um navegador.

  • Insira o nome como Scott e observe que o nome é refletido na saída.

A modificação de dados pode ocorrer a partir da IU ou de ViewModel. Independentemente de onde os dados são alterados, a IU e o ViewModel mantém a sincronização entre eles. Isso o torna um mecanismo de ligação bidirecional. No exemplo acima, quando você altera seu nome na caixa de entrada, ViewModel obtém um novo valor. Quando você altera a propriedade yourName de dentro de ViewModel, a IU recebe um novo valor.

Ler e escrever observáveis

A tabela a seguir lista as operações de leitura e gravação que podem ser realizadas em Observables.

Sr. Não. Operação de leitura / gravação e sintaxe
1

Read

Para ler o valor basta chamar a propriedade Observable sem parâmetros como: AppViewModel.yourName ();
2

Write

Para escrever / atualizar o valor na propriedade Observable, basta passar o valor desejado no parâmetro como: AppViewModel.yourName ('Bob');
3

Write multiple

Várias propriedades ViewModel podem ser atualizadas em uma única linha com a ajuda da sintaxe de encadeamento como: AppViewModel.yourName ('Bob'). YourAge (45);

Matrizes Observáveis

A declaração observável cuida das modificações de dados de um único objeto. ObservableArray trabalha com a coleção de objetos. Este é um recurso muito útil quando você está lidando com aplicativos complexos contendo vários tipos de valores e alterando seu status com frequência com base nas ações do usuário.

Sintaxe

this.arrayName = ko.observableArray();    // It's an empty array

A matriz observável rastreia apenas quais objetos nela são adicionados ou removidos. Ele não notifica se as propriedades do objeto individual são modificadas.

Inicialize pela primeira vez

Você pode inicializar seu array e, ao mesmo tempo, declará-lo como Observável, passando os valores iniciais para o construtor da seguinte maneira.

this.arrayName = ko.observableArray(['scott','jack']);

Lendo da Matriz Observável

Você pode acessar os elementos da matriz observável da seguinte maneira.

alert('The second element is ' + arrayName()[1]);

Funções ObservableArray

KnockoutJS tem seu próprio conjunto de funções de matriz Observable. Eles são convenientes porque -

  • Essas funções funcionam em todos os navegadores.

  • Essas funções cuidarão do rastreamento de dependências automaticamente.

  • A sintaxe é fácil de usar. Por exemplo, para inserir um elemento em uma matriz, você só precisa usar arrayName.push ('valor') em vez de arrayName (). Push ('valor').

A seguir está a lista de vários métodos de Matriz Observável.

Sr. Não. Métodos e Descrição
1 push ('valor')

Insere um novo item no final da matriz.
2 pop ()

Remove o último item da matriz e o retorna.
3 unshift ('valor')

Insere um novo valor no início da matriz.
4 mudança()

Remove o primeiro item da matriz e o retorna.
5 reverter()

Inverte a ordem da matriz.
6 ordenar()

Classifica os itens da matriz em ordem crescente.
7 splice (índice inicial, índice final)

Aceita 2 parâmetros - índice inicial e índice final - remove itens do índice inicial ao final e os retorna como uma matriz.
8 indexOf ('valor')

Esta função retorna o índice da primeira ocorrência do parâmetro fornecido.
9 fatia (índice inicial, índice final)

Este método corta um pedaço de um array. Retorna os itens do índice inicial até o índice final.
10 deletar tudo()

Remove todos os itens e os retorna como uma matriz.
11 remover ('valor')

Remove itens que correspondem ao parâmetro e retorna como uma matriz.
12 remover (função (item) {condição})

Remove itens que estão satisfazendo a condição e os retorna como uma matriz.
13 remover ([conjunto de valores])

Remove itens que correspondem a um determinado conjunto de valores.
14

destroyAll()

Marca todos os itens em uma matriz com propriedade _destroy com valor true.
15

destroy('value')

Procura por um item igual ao parâmetro e o marca com uma propriedade especial _destroy com o valor true.
16

destroy(function(item) { condition})

Encontra todos os itens que satisfazem a condição, marca-os com a propriedade _destroy com valor verdadeiro.
17

destroy([set of values])

Encontra os itens que correspondem a um determinado conjunto de valores, marca-os como _destroy com valor verdadeiro.

Note - Funções Destroy e DestroyAll de ObservableArrays são principalmente para desenvolvedores 'Ruby on Rails'.

Quando você usa o método destroy, os itens correspondentes não são realmente excluídos do array naquele momento, mas são ocultados marcando-os com a propriedade _destroy com valor true para que não possam ser lidos pela IU. Os itens marcados como _destroy igual a true são excluídos posteriormente ao lidar com o gráfico de objeto JSON.