4
respostas

como chamar método dentro do constructor?

Boa tarde pessoal.

Durante os cursos do Flávio ele ensinou a colocar o evento na tag HTML, exemplo:

<h1 onclick=negociacaocontroller.adiciona()>

Eu não gostaria de fazer dessa maneira, gostaria de utilizar o addEventListener.

Esse é meu código atual:

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);

        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');

        this._listaNegociacoes = new Bind(
            new ListaNegociacoes(), 
            new NegociacoesView($('#negociacoesView')), 
            'adiciona', 'esvazia');

        this._mensagem = new Bind(
            new Mensagem(), new MensagemView($('#mensagemView')),
            'texto');       


    }


    adiciona(event) {

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._mensagem.texto = 'Negociação adicionada com sucesso'; 
        this._limpaFormulario();   
    }

    importaNegociacoes(){
        let service = new NegociacaoServices();

        Promise.all([
            service.obterNegociacaoSemana(),
            service.obterNegociacaoPassada(),
            service.obterNegociacaoRetrasada()
        ])
        .then(negociacoes => 
            negociacoes
            .reduce((arrayAchatado, array) => console.log(arrayAchatado.concat(array), []))
            .forEach(n => 
                this._listaNegociacoes.adiciona(n)))
        .catch(erro =>this._mensagem.texto = erro)




             }

    apaga() {

        this._listaNegociacoes.esvazia();
        this._mensagem.texto = 'Negociações apagadas com sucesso';
    }

    _criaNegociacao() {

        return new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value);    
    }

    _limpaFormulario() {

        this._inputData.value = '';
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();   
    }
}

Esse é o código que eu gostaria que funcionasse mas da erro(dessa forma da erro no event.preventDefault()):

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);

        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');

        this._listaNegociacoes = new Bind(
            new ListaNegociacoes(), 
            new NegociacoesView($('#negociacoesView')), 
            'adiciona', 'esvazia');

        this._mensagem = new Bind(
            new Mensagem(), new MensagemView($('#mensagemView')),
            'texto');       

        let adicionar = $("#adiciona")

        adicionar.addEventListener("submit", this.adiciona())

    }


    adiciona(event) {

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._mensagem.texto = 'Negociação adicionada com sucesso'; 
        this._limpaFormulario();   
    }

   ..
}

Só consegui fazer funcionar dessa forma:

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);

        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');

        this._listaNegociacoes = new Bind(
            new ListaNegociacoes(), 
            new NegociacoesView($('#negociacoesView')), 
            'adiciona', 'esvazia');

        this._mensagem = new Bind(
            new Mensagem(), new MensagemView($('#mensagemView')),
            'texto');       

        let adicionar = $("#adiciona")


        adicionar.addEventListener("submit", ()=>{
            event.preventDefault();
            this._listaNegociacoes.adiciona(this._criaNegociacao());
            this._mensagem.texto = 'Negociação adicionada com sucesso'; 
            this._limpaFormulario(); 
        })

    }

Estou fazendo errado? como eu deveria fazer para colocar esses eventos corretamente? Não gosto de coloca-los no html.

Abraços e muito obrigado

4 respostas

Boa tarde, Clayton! Como vai?

Tente fazer assim e veja se funciona:

adicionar.addEventListener("submit", this.adiciona);

Se o problema persistir, mande aqui o erro que ocorreu que eu continuo tentando te ajudar!

Grande abraço e bons estudos!

coloquei


            let adicionar=$("#adicionar")

            adicionar.addEventListener("submit", this.adiciona(event))

e


            let adicionar=$("#adicionar")

            adicionar.addEventListener("submit", this.adiciona)

O erro que acontece é "Uncaught TypeError: Cannot read property 'addEventListener' of null at new NegociacaoController (NegociacaoController.js:22) at (index):61"

Clayton, acho que dessa vez vc errou o seletor do elemento! No seu código inicial vc usou #adiciona e dessa vez usou #adicionar. Repare que o erro está acusando justamente que não conseguiu selecionar nenhum elemento cujo ID seja "adicionar".

Gabriel, eu alterei o nome no id também e continua o mesmo erro. Então teoricamente é possível chamar um método no constructor da própria classe?