Estou estudando faz pouco tempo e atualmente estou com um desafio que não consegui vencer.
Há uma biblioteca JavaScript chamada KnockoutJS que, pelo que li na documentação, realiza a atualização automática da saída de uma página mediante a entrada de dados do usuário.
No próprio site da lib, há um exemplo para testes e para conhecer melhor a sintaxe.
Segue link:
https://knockoutjs.com/examples/helloWorld.html
No exemplo, há dois inputs já com valores escritos.
Caso alguma alteração em qualquer das caixas de texto seja feita, a lib atualiza a saída que fica logo abaixo com as alterações assim que se muda de foco de uma caixa para outra.
Não sei se é um bug, ou estou deixando passar algo que não percebi ainda, mas há uma situação que a lib para de funcionar assim que se tentar fazer uma “trapaça”!
Se realizo alguma alteração via console do browser, além da saída não se alterar, não e possível tentar clicar na caixa de texto e alterar normalmente, pois também fica na mesma. A única maneira é recarregando a página para voltar ao normal.
Minha pergunta:
É possível fazer alterações via console que provoque também a atualização da saída?
Não sei se é alguma particularidade da biblioteca ou toh fazendo alguma coisa errada.
Seguem códigos que usei nas tentativas:
Tentativa#01 - Alteração direta
var box = document.getElementsByTagName("input")[0];
box.value = "Planeta";
O valor do input é alterado, mas a linha HELLO, PLANET EARTH, fica inalterada;
Tentativa#02 - Simulando foco e desfoco do input
var box = document.getElementsByTagName("input")[0];
box.focus();
box.value = "Planeta";
box.blur();
Como a atualização da saída só é feita após tirar o foco do input, tentei isso, mas sem sucesso…
Tentativa#03 - Usando JQuery
//importando lib JQuery para o console do Chrome
var jqry = document.createElement('script');
jqry.src = "https://code.jquery.com/jquery-3.3.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jqry);
jQuery.noConflict();
//selecionando input
var box = document.getElementsByTagName("input")[0];
//mudança ocorre no input, mas não é atualizado na saída
$(box).val("Planet").change();
//tentativa que achei na net...
$(box).keyup();
$(box).val("Planeto").change();
$(box).keydown();
Como podem imaginar… também não deu certo!
Estou me esforçando nesse desafio, pois tenho um projeto que envolve uma página que utiliza essa lib (KnouckoutJS) e encontrei problemas em alterar um input, e a alteração não ser reconhecido pela aplicação web.
Qualquer ajuda é bem-vinda!