Associando métodos do controller às ações do usuário

Agora que temos uma instância da classe NegociacaoController, como faremos para executar o método adiciona? Sabemos que ele deve ser chamado quando o formulário for submetido, ou seja, no evento onsubmit. Como a instância do nosso controller está no escopo global, isto é, é acessível em qualquer lugar da nossa página (ou view, se você quiser adotar ainda mais o jargão do modelo MVC), podemos chamar o método do controller diretamente no elemento da página:

Recarregando a página, um teste demonstra que o método é chamado e o alerta é exibido. Agora que temos certeza que nosso método é chamado, precisamos agora buscar as informações da negociação no formulário. Para isso, precisaremos manipular o DOM. Como o controller é a ponte de ligação entre o modelo e a view, não é feio realizar essa tarefa nele. Sendo assim, temos:

Transformando document.querySelector em $!

Recarregando a página para que o script seja atualizado e clicando no botão Incluir, vemos as informações dos campos do formulário impressas no console. Se olharmos atentamente o nosso código, o document.querySelector, assim como bibliotecas de manipulação de DOM, como jQuery, aceita como parâmetro um seletor CSS. E se ao invés de escrevermos document.querySelector, pudéssemos escrever $? Em JavaScript, podemos armazenar funções em variáveis e que tal fazermos isso:

Infelizmente não funcionará, teremos o erro NegociacaoController.js:9 Uncaught TypeError: Illegal invocation. Quando chamamos document.querySelector, estamos chamando nada mais, nada menos que um método de document. O this de querySelector é o próprio document, no entanto, quando armazenamos o método em uma variável, o this deixou de ser document e por isso nosso código não funciona. O this é dinâmico em JavaScript e varia com o contexto de execução da função.

Mudando o contexto de this com bind

Mas nem tudo está perdido, podemos associar novamente o método que armazenamos na variável $ com document, dessa forma:

 

Deixe seu comentário:

Your email address will not be published. Required fields are marked *

*