KnockoutJS - Ligações Declarativas

A ligação declarativa em KnockoutJS fornece uma maneira poderosa de conectar dados à IU.

É importante entender a relação entre ligações e observáveis. Tecnicamente, esses dois são diferentes. Você pode usar um objeto JavaScript normal, pois ViewModel e KnockoutJS podem processar a vinculação de View corretamente.

Sem Observable, a propriedade da UI será processada apenas pela primeira vez. Nesse caso, ele não pode ser atualizado automaticamente com base na atualização de dados subjacente. Para conseguir isso, as ligações devem ser referidas como propriedades observáveis.

Sintaxe de ligação

A ligação consiste em 2 itens, a ligação name e value. A seguir está um exemplo simples -

Today is : <span data-bind = "text: whatDay"></span>

Aqui, text é o nome da ligação e whatDay é o valor da ligação. Você pode ter várias ligações separadas por vírgula, conforme mostrado na sintaxe a seguir.

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

Aqui, o valor é atualizado após cada tecla ser pressionada.

Valores Vinculativos

O valor de ligação pode ser um single value, literal, uma variable ou pode ser um JavaScriptexpressão. Se a vinculação se referir a alguma expressão ou referência inválida, KO produzirá um erro e interromperá o processamento da vinculação.

A seguir estão alguns exemplos de ligações.

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

Observe os seguintes pontos -

  • Espaços em branco não fazem nenhuma diferença.

  • A partir do KO 3.0, você pode pular o valor de vinculação, o que dará à vinculação um valor indefinido.

Contexto de ligação

Os dados que estão sendo usados ​​nas ligações atuais podem ser referenciados por um objeto. Este objeto é chamadobinding context.

A hierarquia de contexto é criada e gerenciada pelo KnockoutJS automaticamente. A tabela a seguir lista os diferentes tipos de contextos de ligação fornecidos por KO.

Sr. Não. Tipos de contexto de ligação e descrição
1

$root

Isso sempre se refere ao ViewModel de nível superior. Isso torna possível acessar métodos de nível superior para manipular ViewModel. Geralmente é o objeto, que é passado para ko.applyBindings.
2

$data

Esta propriedade é muito parecida com thispalavra-chave no objeto Javascript. A propriedade $ data em um contexto de ligação se refere ao objeto ViewModel para o contexto atual.
3

$index

Esta propriedade contém o índice de um item atual de uma matriz dentro de um loop foreach. O valor de $ index mudará automaticamente conforme e quando a matriz Observable subjacente for atualizada. Obviamente, este contexto está disponível apenas paraforeach ligações.
4

$parent

Esta propriedade se refere ao objeto pai ViewModel. Isso é útil quando você deseja acessar as propriedades externas de ViewModel de dentro de um loop aninhado.
5

$parentContext

O objeto de contexto que está vinculado ao nível pai é chamado $parentContext. Isso é diferente de$parent. $ parent se refere aos dados. Enquanto $ parentContext se refere ao contexto de ligação. Por exemplo, você pode precisar acessar o índice de item foreach externo de um contexto interno.
6

$rawdata

Este contexto contém o valor ViewModel bruto na situação atual. Isso se assemelha a $ data, mas a diferença é que, se ViewModel for agrupado em Observable, $ data será apenas desembrulhado. ViewModel e $ rawdata tornam-se dados observáveis ​​reais.
7

$component

Este contexto é usado para se referir ao ViewModel daquele componente, quando você está dentro de um componente específico. Por exemplo, você pode querer acessar alguma propriedade de ViewModel em vez dos dados atuais na seção de modelo do componente.
8

$componentTemplateNodes

Isso representa uma matriz de nós DOM passados ​​para aquele componente específico quando você está dentro de um modelo de componente específico.

Os termos a seguir também estão disponíveis no contexto vinculativo, mas não são realmente um contexto vinculativo.

  • $context - Isso nada mais é do que um objeto de contexto de ligação existente.

  • $element - Este objeto se refere a um elemento no DOM na ligação atual.

Trabalhando com texto e aparências

A seguir está uma lista de tipos de vinculação fornecidos por KO para lidar com texto e aparências visuais.

Sr. Não. Tipo de ligação e uso
1 visível: <binding-condition>

Para mostrar ou ocultar o elemento HTML DOM dependendo de certas condições.
2 texto: <binding-value>

Para definir o conteúdo de um elemento HTML DOM.
3 html: <binding-value>

Para definir o conteúdo da marcação HTML de um elemento DOM.
4 css: <binding-object>

Para aplicar classes CSS a um elemento.
5 estilo: <binding-object>

Para definir o atributo de estilo embutido de um elemento.
6 attr: <binding-object>

Para adicionar atributos a um elemento dinamicamente.

Trabalhando com Ligações de Fluxo de Controle

A seguir está uma lista de tipos de vinculação de fluxo de controle fornecida por KO.

Sr. Não. Tipo de ligação e uso
1 foreach: <binding-array>

Nessa associação, cada item da matriz é referenciado na marcação HTML em um loop.
2 if: <binding-condition>

Se a condição for verdadeira, a marcação HTML fornecida será processada. Caso contrário, será removido do DOM.
3 ifnot: <binding-condition>

Negação de If. Se a condição for verdadeira, a marcação HTML fornecida será processada. Caso contrário, será removido do DOM.
4 com: <binding-object>

Essa associação é usada para ligar os elementos filhos de um objeto no contexto do objeto especificado.
5 componente: <component-name> OU componente: <component-object>

Essa ligação é usada para inserir um componente em elementos DOM e passar os parâmetros opcionalmente.

Trabalho com vinculações de campos de formulário

A seguir está a lista de tipos de vinculação de campos de formulário fornecidos por KO.

Sr. Não. Tipo de ligação e uso
1 clique: <função de ligação>

Essa ligação é usada para invocar uma função JavaScript associada a um elemento DOM com base em um clique.
2 evento: <evento DOM: função do manipulador>

Essa ligação é usada para ouvir os eventos DOM especificados e chamar funções de manipulador associadas com base neles.
3 enviar: <função de ligação>

Essa ligação é usada para invocar uma função JavaScript quando o elemento DOM associado é enviado.
4 ativar: <binding-value>

Essa associação é usada para habilitar certos elementos DOM com base em uma condição especificada.
5 desativar: <binding-value>

Essa ligação desativa o elemento DOM associado quando o parâmetro é avaliado como verdadeiro.
6 valor: <binding-value>

Essa ligação é usada para vincular o valor do respectivo elemento DOM à propriedade ViewModel.
7 textInput: <binding-value>

Essa associação é usada para criar uma associação bidirecional entre a caixa de texto ou textarea e a propriedade ViewModel.
8 hasFocus: <binding-value>

Essa ligação é usada para definir manualmente o foco de um elemento HTML DOM por meio de uma propriedade ViewModel.
9 verificado: <binding-value>

Essa ligação é usada para criar um link entre um elemento de formulário verificável e a propriedade ViewModel.
10 opções: <binding-array>

Essa ligação é usada para definir as opções para um elemento selecionado.
11 selectedOptions: <binding-array>

Essa ligação é usada para trabalhar com elementos que são selecionados atualmente no controle de formulário de seleção de várias listas.
12 UniqueName: <binding-value>

Essa ligação é usada para gerar um nome exclusivo para um elemento DOM.