Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Criando metodo para apagar a mensagem

Estou tentando implementar este metodo na NegociacoesController:

    _limpaMensagem(){
        this._inputData.addEventListener('keypress', function(){
            console.log('ouvindo');
            this._mensagem.texto = '';

             this._mensagemView.update(this._mensagem);
        });
    }

porem recebo está mensagem de erro:


NegociacaoController.js:50 ouvindo
NegociacaoController.js:51 Uncaught TypeError: Cannot set property 'texto' of undefined
    at HTMLInputElement.<anonymous> (NegociacaoController.js:51)
(anonymous) @ NegociacaoController.js:51

o restante esta funcionando normal

6 respostas

O campo "mensagem" está vindo undefined, quando se tenta acessar o campo "texto" de mensagem, o javascript aplica o erro, verifique se "mensagem" está vindo com os dados corretamente, você também pode ter confundido esse "texto" com "textContent"

solução!

Oi Luiz! Vamos lá.

Primeiramente, você não deveria dentro do seu método limpaMensagem associar um evento. O método _limpaMensagem é que deve ser chamado por um evento. Além disso, você usou o _ para indicar que o método é privado. Se ele vai ser chamado por alguém de fora da classe, ele não deveria ter _.

Outro ponto, sua função definida para o evento não funcionará porque o evento precisa ser uma arrow function para manter o escopo léxico de this (não sei se você chegou nessa parte do treinamento). Se usar uma function, ele será dinâmico e o this será o elemento do DOM e não seu controller. Você pode é usar um temporizador para limpar a mensagem depois da inclusão, um setTimeout.

Então, no primeiro momento, basta você fazer a associação do método limpaMensagem a um botão qualquer que você criar e associá-lo como você fez com o botão de inclusão.

Talvez seja interessante evoluir no curso antes de tentar propor mudanças. Mas essas dicas que escrevi lançam uma luz sobre o problema.

Se quiser manter esse código precisa mudar para uma arrow function.

_limpaMensagem(){
        this._inputData.addEventListener('keypress', () => {
            console.log('ouvindo');
            this._mensagem.texto = '';

             this._mensagemView.update(this._mensagem);
        });
    }

Olá,

ainda fiquei com dúvidas:

primeiro por que com arrow function não perde o escopo do controller e com uma função anônima perde ?

outra questão neste caso do _limpaMensagem ele foi criado dentro da classe controller então não estaria certo ser privado ?

Oi Luiz, vamos tirar essas dúvidas.

Primeiro, vou indicar os conteúdos de revisão:

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-1/task/16530

No capítulo acima, arrow function é introduzida apenas como uma sintaxe mais enxuta que function, quando na verdade não é.

Contudo, no módulo 2 do treinamento, que você ainda não chegou, é mostrada a diferença marcante da arrow function

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2/task/17451

Inclusive há um exercício de revisão

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2/task/17455

Bom, digamos que você se colocou em uma situação na qual precisa avançar com o treinamento, mas vou dar uma explicada resumida aqui em algo que é quase 40 minutos de explicação.

Toda function possui um this dinâmico. Isto é, ele muda de acordo com o contexto que a função é chamada e só sabemos o seu valor quando a função é chamada (runtime). Já uma arrow function possui um this léxico, ou seja, estático. Ele não muda em runtime e se preserva ao logo da aplicação. No caso, você pode antecipadamente indicar qual é o this de uma arrow function olhando o escopo ao redor do seu código.

Voltando ao exemplo do seu código, com arrow function:

_limpaMensagem(){
        this._inputData.addEventListener('keypress', () => {
            console.log('ouvindo');
            this._mensagem.texto = '';

             this._mensagemView.update(this._mensagem);
        });
    }

Como você esta usando arrow function, o this não será o elemento inputData. Seria se você usasse function. Quando usa arrow function, o this será a instância do seu controller, aquela no qual o método _limpaMensagem é definido. É por isso que você conseguirá usar this._mensagemView. Ele se manterá até o fim.

Quando chegar no segundo módulo poderá praticar ainda mais com arrow function.

Por fim, se o seu método começa com _ é porque ele não pode ser chamado fora da instância de NegociacaoController. Se quiser continuar com o código que escreveu depois da minha explicação, ok, não há problema continuar com o _.

O mais importante é entender que JavaScript não é Java, é uma linguagem completamente diferente, apesar de alguns conceitos de OO se aplicarem em ambas. Digo isso porque vi que cursou cursos de Java.

ok, agora sim entendi.

Parabéns você é um ótimo professor e com certeza vou para segunda parte !

Realmente eu estou tentando entender pelo meu conhecimento em Java.

Não tem problema nenhum fazer uma alusão ao Java, mas JavaScript tem seu charme e seus detalhes. Há mais dois cursos pela frente que muito mistério ainda será revelado!

Obrigado pelo feedback meu aluno!