Como funcionam Bindings no KnockoutJs

Este conteúdo é basicamente uma tradução dos materiais originais. A intenção é adquirir aprendizado sobre o KnockoutJs para Magento 2 e criar conteúdo em português sobre KnockouJs.

Documentação

Bindings

No KnockoutJs, bindings são a maneira de conectar a lógica do ViewModel (os dados e a lógica de negócios) com a View (HTML). Em resumo, é através dos bindings que é realizada a interface de usuário refletir automaticamente as mudanças nos seus dados, sem a necessidade de manipular diretamente o DOM.

Os bindings no KnockoutJs funcionam através do atributo data-bind em elementos HTML. Esse atributo é onde você especifica o binding que deseja usar e os valores associados.

O atributo data-bind não é nativo do HTML, embora seja perfeitamente aceitável (é estritamente compatível com HTML 5 e não causa problemas com HTML 4. Mas como o navegador não reconhece esse atributo por padrão, é preciso ativar o Knockout para que ele tenha efeito.

Binding syntax

O sistema de vinculação declarativa do KnockoutJs fornece uma maneira concisa e poderosa de vincular dados à IU. Geralmente é fácil e óbvio vincular-se a propriedades de dados simples ou usar uma ligação única. Para ligações mais complexas, ajuda a compreender melhor o comportamento e a sintaxe do sistema de ligação do KnockoutJs.

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

Uma ligação consiste em dois itens, o nome e o valor da ligação, separados por dois pontos. Um elemento pode incluir múltiplas ligações (relacionadas ou não), com cada ligação separada por uma vírgula. Os dados que estão sendo usados nas ligações atuais podem ser referenciados por um objeto. Este objeto é chamado de contexto de ligação (binding context).

O valor de ligação pode ser um único valor, variável ou literal ou quase qualquer expressão JavaScript válida.

As vinculações podem incluir qualquer quantidade de espaços em branco (espaços, tabulações e novas linhas), então é possível usá-los para organizar suas vinculações como desejar.

As ligações podem incluir comentários no estilo JavaScript (//... e /*...*/). Por exemplo:

Caso seja especificado uma vinculação sem um valor, o KnockoutJs dará à vinculação o valor undefined.

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

Variável de Contexto	Descrição
`$root`	Esta propriedade sempre se refere ao ViewModel de nível superior. Isso torna possível acessar métodos de nível superior para manipular ViewModel. Geralmente esse é o objeto passado para `ko.applyBindings`.
`$data`	Esta propriedade é muito parecida com a palavra-chave `this` do Javascript. A propriedade `$data` em um contexto de ligação refere-se ao objeto ViewModel para o contexto atual.
`$index`	Esta propriedade contém o índice de um item atual de um array 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 para ligações foreach.
`$parent`	Esta propriedade refere-se ao objeto ViewModel pai. Isso é útil quando se deseja acessar propriedades externas do ViewModel de dentro de um loop aninhado.
`$parentContext`	Esta propriedade é diferente da `$parent`, pois a `$parent` refere-se a dados. Considerando que `$parentContext` refere-se ao contexto de ligação.
`$rawdata`	Este contexto contém o valor bruto do ViewModel na situação atual. Esta propriedade se assemelha a `$data`, mas a diferença é que, se o ViewModel for agrupado em Observable, então `$data` será apenas desembrulhado. O ViewModel e `$rawdata` tornam-se dados observáveis reais.
`$component`	Este contexto é usado para se referir ao ViewModel daquele componente, quando está dentro de um determinado componente.
`$componentTemplateNodes`	É uma representação de uma matriz de nós DOM passados para esse componente específico quando se está dentro de um modelo de componente específico.

O nome da ligação geralmente deve corresponder a uma ligação registrada (integrada ou personalizada) ou ser um parâmetro para outra ligação. Se o nome não corresponder a nenhum deles, o KnockoutJs irá ignorá-lo (sem qualquer erro ou aviso). Portanto, se uma ligação não funcionar, primeiro verifique se o nome está correto.

O valor de ligação pode ser um único valor, variável ou literal ou quase qualquer expressão JavaScript válida. Aqui estão exemplos de vários valores de ligação:

<!-- variable (usually a property of the current view model -->
<div data-bind="visible: shouldShowMessage">...</div>
 
<!-- comparison and conditional, template literals -->
The item is <span data-bind="text: price() > 50 ? `expensive` : `cheap`"></span>.
 
<!-- function call and comparison -->
<button data-bind="enable: parseAreaCode(cellphoneNumber()) != '555'">...</button>
 
<!-- function expression -->
<div data-bind="click: function (data) { myFunction('param1', data) }">...</div>
 
<!-- object literal (with unquoted and quoted property names) -->
<div data-bind="with: {emotion: 'happy', 'facial-expression': 'smile'}">...</div>

Blog

Como funcionam Bindings no KnockoutJs

Lucas Teixeira dos Santos Santana

Documentação

Bindings

Binding syntax

Join Our Newsletter. No Spam, Only the good stuff.

Related