Índice
Ligação de dados não é nada mais do que a união de dados dinâmicos em texto ou HTML nas diferentes partes da árvore SOL do nosso documento onde temos Knockout.js funcionando, isso nos permite gerar conteúdo dinâmico a partir de visualizações e modelos.Este conceito pode ser encontrado em um grande número de estruturas de desenvolvimento para JavaScript uma vez que é uma forma muito eficaz de expressar a lógica de desenvolvimento, é de vital importância que entendamos como funciona e como pode tornar nossas vidas mais fáceis ao fazer nossos aplicativos.
RequisitosO principal requisito é ser capaz de executar Knockout.js se o baixamos ou o incluímos de um CDN. Também precisaremos de um servidor de estilo Apache para servir a nossa página, e um editor de texto como Texto Sublime ou NotePad ++ para criar os documentos que nossos aplicativos irão transportar.
A melhor maneira de ver o Ligação de dados é com um exemplo, vamos ver no código a seguir como criamos um documento HTML onde incluímos Knockout.js, então, em nosso corpo, criamos um rótulo H1 nele nós fazemos um ligação de dados do HTML, isso significa que está aguardando o código HTML.
Na parte JavaScript simplesmente o que fizemos foi criar um modelo de visão e nele definir alguns atributos para poder trabalhar com ele. O interessante é que isso nos permite passar os dados de nosso modelo de visão a uma parte do HTML. Vamos ver como é o nosso código:
Data Binding em knockout.jsAo chamar nosso documento de nosso navegador, obtemos o seguinte resultado:
Mas não só o que nos permite é imprimir texto para o usuário, também podemos incorporar CSS, classes e atributos aos nossos rótulos HTML, permitindo-nos controlar quase todos os aspectos de nossa página sem a necessidade de definir valores estáticos.
Vamos ver no exemplo a seguir como damos uma classe especial a um rótulo HTML, a ideia é que podemos gerar estilos dinâmicos sem a necessidade de intervir quando temos um aplicativo que busca uma fonte DESCANSO, no entanto, neste caso, para simplificar, carregaremos apenas um componente dinamicamente:
Data Binding em knockout.jsEntão, percebemos como podemos passar um componente estilo que definirá a aparência do texto, poderíamos também adicionar uma classe e finalmente chamar nosso texto do modelo, também notamos que fazemos tudo isso no mesmo ligação de dados, separando apenas os diferentes elementos com vírgulas.
Se executarmos nosso novo exemplo, o resultado em nosso navegador será o seguinte:
PROLONGAR
Existem outros recursos que podemos usar com o ligação de dados, um deles são os condicionais, ou seja, podemos colocar um elemento ou outro dentro de nossos rótulos HTML levando em consideração as diferentes propriedades do nosso modelo. Vamos ver o código a seguir, onde usamos um exemplo desse estilo:
Vinculação de dados condicionalEm nossa visão do modelo, definimos um atributo chamado id que definimos como 0, então em nosso HTML na seção de ligação de dados Definimos um operador ternário, onde especificamos se o id da visualização do modelo é 0, ele exibe 'Olá', caso contrário, ele exibe 'Adeus'.
Vamos executar o exemplo no navegador para ver seu resultado:
Algo muito importante que devemos levar em consideração é o contexto de nossos elementos, isso porque Knockout.js usa uma estrutura hierárquica de Pai Filho para lidar com as diferentes propriedades que obtemos das visualizações do modelo.
Isso significa que estamos sempre trabalhando com base em um pai, e assim podemos acessar suas propriedades, gerando propriedades do filho que se diferenciam de outros filhos que estão no mesmo nível, podendo assim incorporar valores diferentes.
Como tudo é relativo ao contexto, vemos que poderíamos usar nos exemplos anteriores o texto de ligação de dados sem a necessidade de indicar a quem pertence, pois quando isso acontecer, Knockout.js ele assume imediatamente o contexto do filho atual. Vamos ver abaixo os diferentes tipos de contexto que podemos manipular em nosso aplicativo:
$ rootÉ o contexto principal, é de onde nossa visão do modelo deriva, quando invocado de qualquer parte de nosso aplicativo, ele sempre procurará o relacionamento mais hierárquico e de maior precedência em nossa estrutura, é especial para quando temos muitos filhos e queremos algo do pai mais velho.
$ parentFunciona de forma semelhante a $ root, com a diferença de que se refere apenas ao pai imediato do nosso elemento, então seu escopo é limitado a isso, é amplamente utilizado quando trabalhamos com ciclos para cada para gerar muitos filhos.
$ paisA adição do plural a este contexto nos diz que construímos um tipo de arranjo ou array que contém um índice para cada um dos pais da criança de onde o chamamos, assim $ pais [0] é o pai imediato, $ pais [1] é o pai do pai imediato e assim por diante.
$ dataEle nos permite acessar os dados do contexto onde estamos posicionados, geralmente é usado quando estamos trabalhando com conteúdos que são variáveis e precisamos acessar nossas propriedades de visualização do modelo.
$ indexÉ acessível apenas quando trabalhamos com loops para cada e nos permite acessar as diferentes posições do nosso elemento.
Quando precisamos iterar sobre uma série de elementos, é o momento em que devemos usar o loop para cada, isso irá percorrer um array ou uma lista de elementos e, desta forma, podemos construir nossa lista no documento HTML.
No exemplo a seguir, teremos uma propriedade chamada books em nossa visualização do modelo e, em seguida, iremos percorrê-la com um para cada fazendo uso de uma das variáveis de contexto, neste caso $ data, vamos ver:
Data binding foreach
