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

Não estou conseguindo inserir a view

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <!--<link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">-->

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body class="container">

    <h1 class="text-center">Negociações</h1>

    <form class="form" onsubmit="negociacaoController.adiciona(event)">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus />
        </div>

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required />
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control" min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <div class="text-center">
        <button class="btn btn-primary text-center" type="button">
            Importar Negociações
        </button>
        <button class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div>
    <br>
    <br>
    <div id="negociacoesView"></div>
    <script src="js/app/models/Negociacao.js"></script>
    <script src="js/app/controlllers/NegociacaoController.js"></script>
    <script src="js/app/helpers/DateHelper.js"></script>
    <script src="js/app/models/ListaNegociacoes.js"></script>
    <script src="js/app/views/NegociacoesView.js"></script>
    <script>
        let negociacaoController = new NegociacaoController();
    </script>
</body>
</html>
class NegociacaoController
{
    constructor()
    {
        let $ = document.querySelector.bind(document);
        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');
        this._listaNegociacoes = new ListaNegociacoes();
        //this._negociacoesView = new NegociacaoView($('#negociacoesView'));
        this._negociacoesView = new NegociacoesView($('#negociacoesView'));
        this._negociacoesView.update();
    }

    adiciona(event)
    {
        let
        data = DateHelper.textoParaData(this._inputData.value);
        var negociacao = new Negociacao(
            //new Date(this._inputData.value.replace(/-/g,',')),
            data,
            this._inputQuantidade.value,
            this._inputValor.value

        );
        let
        diaMesAno =  DateHelper.dataParaTexto(negociacao.data);
        //console.log(diaMesAno);
        event.preventDefault();
        this._listaNegociacoes.adiciona(negociacao);

        console.log(this._listaNegociacoes.negociacoes);
        this._limpaFormulario();
    }

    //_criaNegociacao()
    //{
    //    return new Negociacao(
    //        //new Date(this._inputData.value.replace(/-/g,',')),
    //        data,
    //        this._inputQuantidade.value,
    //        this._inputValor.value

    //    );
    //    let
    //    diaMesAno =  DateHelper.dataParaTexto(negociacao.data);
    //    //console.log(diaMesAno);
    //}

    _limpaFormulario()
    {
        this._inputData.value = '';
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();
    }
}
class NegociacoesView {

    constructor(elemento) {

        this.elemento = elemento;
    }

    _template() {

        return `<table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>DATA</th>
                            <th>QUANTIDADE</th>
                            <th>VALOR</th>
                            <th>VOLUME</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
             </table>
            `;
    }
    update() {

        this._elemento.innerHTML = this._template();
    }
}
6 respostas

Oi Rosa, tudo bem? Antes deu olhar seu código, pode postar todas as mensagens que aparecem no console do seu navegador?

Aliás, quando você diz que não consegue inserir a view, você esta se referindo que não esta conseguindo incluir uma negociação na lista, é isso?

Olá Rosa, a primeira coisa que pude verificar o seu método adiciona

adiciona(event) {

}

Não tem o preventDefault, então ao clicar ele esta submete a página, então faça um event.preventDefault(), tem algumas outras coisas para ir verificando , mas acho que esse seria um primeiro passo

Bom dia

Conforme respondido pelo Júlio César adicionei o event.preventDefault() no método adiciona.

A mensagem no console que aparece é essa :

Uncaught TypeError: Cannot set property 'innerHTML' of undefined at NegociacoesView.update (NegociacoesView.js:26) at new NegociacaoController (NegociacaoController.js:12) at index.html:53

e o breakpoint para nessa linha : this._elemento.innerHTML = this._template();

Muito obrigada pela atenção

Na sua classe NegociacoesView você define no construtor a propriedade this.elemento e no método update() você tenta chamar a variável this._elemento .

solução!

Oi Rosa!

Basta mudar para

constructor(elemento) {

        this._elemento = elemento;
    }

Boa tarde ...muito obrigado pela ajuda, agora deu certo !!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software