Vinculações avançadas em Knockout.js

A escrita de aplicativos complexos está ligada ao aumento da complexidade do código, embora isso geralmente aconteça não é um axioma ou uma regra estabelecida, na verdade seria melhor se nosso aplicativo fosse complexo devido à união de muitos pequenos aplicativos, já que um pequeno aplicativo simples tornaria a vida do desenvolvedor menos complicada.

Em caso de Knockout.js algo semelhante acontece com ligações, onde existem comportamentos que podemos alcançar usando o ligações Porém, isso geraria uma complexidade alta no final, pois isso nos tira um pouco da flexibilidade, com isso não dizemos que o ligações o básico é ruim, simplesmente há momentos em que não funcionaria corretamente para nós.

Ligações avançadasÉ por isso que devemos usar o ligações avançadas, aqui podemos construir nosso próprio ligações com comportamentos que definimos diretamente, poupando-nos um certo grau de complexidade no código e ganhando legibilidade, a única desvantagem de chamá-lo assim é que construiríamos esses comportamentos quase do zero, tornando a reutilização do código nula.

Faça ligação de dois ou mais ViewModels
Há momentos em que nosso ViewModels deve permanecer o mais simples possível, ou talvez precisemos usar um ViewModel que é compartilhado em cada página de nosso aplicativo, em qualquer caso o requisito de poder usar vários ViewModels ao mesmo tempo, permanece.

Como funciona?Antes de se preocupar com esse assunto, é bom saber que não é uma loucura e nem impossível de se fazer, na verdade é uma prática muito comum manter a simplicidade e legibilidade do nosso código na aplicação. Para que isso aconteça, só precisamos passar um segundo parâmetro para o método ko.applyBindings que nos ajudará a atingir esse objetivo, limitando o obrigatório ao HTML que o contém, desta forma podemos aplicar todos os ViewModel que precisamos sem qualquer inconveniente

Vamos ver um pequeno exemplo onde tornaremos isso possível, primeiro de tudo, vamos construir um HTML onde teremos dois elementos cada um com um nome de ViewModel diferente, isso nos dará a base para o que queremos alcançar e dentro de cada entrada, simplesmente colocaremos um ligação de dados do tipo de texto.

Já na parte de JavaScript vamos definir o nosso ViewModel geral, onde retornaremos um atributo chamado Nome e na hora de criar a instância deles, vamos criar um viewModel1 e um viewModel2 que serão instâncias do ViewModel geral que criamos usando nomes diferentes, finalmente aplicando o ko.applyBinding vamos dizer em qual bloco HTML cada um deve pertencer e assim atingiremos o objetivo deste exemplo.

Vejamos então no código a seguir como expressamos tudo o que explicamos anteriormente:

 Vinculação de dados avançada

Vamos ver na imagem a seguir como fica nosso exemplo quando o executamos no navegador:

PROLONGAR

Vemos na imagem que nossos dois ViewModels efetivamente eles estão sendo aplicados em nosso HTML cada um contido no elemento que passamos como o segundo parâmetro para o método ko.applyBindings () dando-nos assim a ideia de como podemos aplicá-lo de forma mais completa nas nossas aplicações.

Bindings e TinyMCE
Para este exemplo, vamos construir uma funcionalidade adaptada ao mundo real, vamos construir um obrigatório avançado para nos ajudar a incorporar o editor TinyMCE em nosso HTML, o que este editor faz é construir uma interface WYSIWYG, ou seja, um editor de rich text. A principal dificuldade desta implementação é que devemos criar nosso próprio obrigatório, que pode nos causar dor de cabeça se não tivermos um guia adequado, que teremos agora.

RequisitosPara realizar este exemplo, temos que baixar alguns recursos externos, neste caso jQuery em sua versão mais recente, além de baixar o TinyMCE e incluí-lo em nosso projeto, para obter os recursos, basta fazer uma pesquisa rápida em Google portanto, não nos deteremos muito neste ponto. A outra coisa que precisamos é criar um novo arquivo chamado kobinding.js que é onde escreveremos o código necessário para que nossa solução funcione corretamente. Assim que tivermos todos os nossos recursos baixados e em um caminho que possamos acessar de nosso aplicativo, podemos escrever nosso código.

O que o aplicativo fará é nos dar um antevisão do que escrevemos, para isso criaremos um formulário onde colocaremos nossa caixa de texto que terá em TinyMCE, um botão de reset para retornar tudo ao estado inicial e, finalmente, um onde receberemos o texto que estamos escrevendo.

Por fim, incluiremos todos os nossos recursos, incluindo o novo arquivo kobinding.js e construímos o código necessário para o nosso ViewModel com um observável que nos permite detectar as mudanças em nossa caixa de texto, vamos ver a aparência de nosso código:

 Conteúdo de redefinição de TinyMCE de vinculação de dados avançada
Vista prévia

Se olharmos o código e tivermos seguido os tutoriais anteriores, perceberemos que não há nada que nos possa causar dúvidas, porém se executarmos isso em nosso navegador não funcionará da forma que explicamos e isso porque nós necessito de um obrigatório personalizado em nosso novo arquivo.

O que este novo código faz é um link entre o comportamento do TinyMCE e o nosso ViewModel, para isso vamos criar duas funções ou métodos chamados iniciar Y atualizar, para o método iniciar como o nome sugere é quando inicializamos nosso componente, aqui definimos o obrigatório da área de texto com TinyMCE para que possamos aplicar o observável, além disso vamos definir o evento mudança que é quando o estado e o conteúdo de nossa caixa de texto mudam, para que possamos atualizar o conteúdo em tempo real.

O outro método ou função é atualizar, este é ativado sempre que há alterações no elemento vinculado, como o botão para restabelecer o conteúdo, o que faz é estar diretamente vinculado ao que o observável que criamos anteriormente nos fornece. Vamos ver o código final para nosso kobinding.js:

 ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target. obter conteudo ());}); }}; $ (elemento) .text (valueAccessor () ()); setTimeout (function () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (element, function () {$ (element) .tinymce (). remove ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == value) {tinymce.setContent (value); }}}};

Se executarmos novamente em nosso navegador, veremos que tudo funciona como deveria, no momento da escrita e se mudarmos o foco veremos que em nossa área de visualização temos o conteúdo como deveria ser:

PROLONGAR

Com isso, fomos capazes de criar um ligação avançada e personalizado que nos ajuda a entender tudo o que podemos alcançar com um pouco de criatividade e todas as ferramentas que nos oferece Nocaute. Casos como o de TinyMCE Eles são muito comuns, visto que este tipo de plug-in é muito popular no desenvolvimento de aplicações web, então podemos ter que aplicar uma solução semelhante em algum momento do desenvolvimento de nosso projeto.

Com isso terminamos este tutorial, como vemos não é necessário nos limitarmos às funções e métodos pré-estabelecidos em NocauteClaro, existem funcionalidades que ainda estão muito avançadas para este nível de conhecimento, mas que com prática e pesquisa podem ser alcançadas. O interessante é que tudo isso pode ser alcançado com uma pequena leitura da documentação oficial do Nocaute e também procurando casos de exemplo que nos ajudem a ilustrar e nos colocar no contexto.