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

A tabela é preenchida mas não aparece na tela

class NegociacoesView {

    constructor(elemento){

        this._elemento = elemento;
    }

    _template(model) {

        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>
                ${model.negociacoes.map(n => `

                    <tr>
                        <td>${DateHelper.dataParaTexto(n.data)}</td>
                        <td>${n.quantidade}</td>
                        <td>${n.valor}</td>
                        <td>${n.volume}</td>
                    </tr>

                `).join('')}
            </tbody>

            <tfoot>
            </tfoot>
        </table>
        `;
    }

    update(model) {

        this._elemento.innerHTML = this._template(model);
    }
}

Acrescentado no index.html:

<script src="js/app/views/NegociacoesView.js"></script>

Acrescentado no NegociacaoController:

this._negociacoesView = new NegociacoesView($('#negociacoesView'));
this._negociacoesView.update(this._listaNegociacoes);
4 respostas

Olá! Se a tabela é apresentada, mas nada aparece na tela, um dos motivos é que o this._listaNegociacoes passado para o this._negociacoesView.update não deve ter uma lista de negociações por algum motivo. Se a lista estiver vazia, dentro do seu template a instrução ${model.negociacoes.map(n => irá iterar em um array vazia e por conseguinte não irá construir as linhas.

Compartilhe o código completo do seu NegociacaoController e da classe que encapsula o array de negociacoes.

No aguardo!

class NegociacaoController {

    constructor(){

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

        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');
        this._listaNegociacoes = new ListaNegociacoes();
        this._negociacoesView = new NegociacoesView($('#negociacoesView'));

        this._negociacoesView.update(this._listaNegociacoes);
    }

    adiciona(event){

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._limpaFormulario();
    }

    _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();
    }
}
solução!

Olá! Dá uma olhadinha aqui comigo:

    adiciona(event){

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._limpaFormulario();
    }

Veja que não há a chamada de this._negociacoesView.update(this._listaNegociacoes);. É necessário que haja essa chamada para que a view seja renderizada. Só depois, você aprenderá no curso a realizar essa atualização toda vez que o modelo mudar.

Alterando fica:

    adiciona(event){

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._negociacoesView.update(this._listaNegociacoes);
        this._limpaFormulario();
    }

Sucesso e bom estudo minha aluna. Aliás, feliz 2018 com muito estudo!

Deu certinho, agora! Muito obrigada, professor. Feliz 2018!!