Update the html by js, following standard MVC

0

I would like the generated table to have an update button, which when clicked would update the field by picking up the values from the form

NegotiationView (where the table was dynamically mounted)

class NegociacoesView extends View {

constructor(elemento) {
    super(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>
                    <td onclick="negociacaoController.remover(event)"><button class="btn btn-danger" type="button">Deletar</button></td>
                    <td onclick="negociacaoController.atualizar(event)"><button class="btn btn-warning " type="button">Atualizar</button></td>
                </tr>

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

        <tfoot>
            <td colspan="3"></td>
            <td>
                ${model.negociacoes.reduce((total, n) => total + n.volume, 0.0)}
            </td>
        </tfoot>

    </table>
    ';
}

}

NegotiationController (Where method to update was created)

class NegociacaoController {

constructor() {

    let $ = document.querySelector.bind(document);
    this._inputData = $('#data');
    this._inputQuantidade = $('#quantidade');
    this._inputValor = $('#valor');

    this._listaNegociacoes = new ListaNegociacoes(model =>
        this._negociacoesView.update(model));

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

    this._mensagem = new Mensagem();
    this._mensagemView = new MensagemView($('#mensagemView'));
    this._mensagemView.update(this._mensagem);

}

adiciona(event) {

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

    this._mensagem.texto = 'Negociação adicionada com sucesso';
    this._mensagemView.update(this._mensagem);

    this._limpaFormulario();
}

apaga() {

    this._listaNegociacoes.esvazia();

    this._mensagem.texto = 'Negociações apagadas com sucesso';
    this._mensagemView.update(this._mensagem);
}
remover(event) {
    event.preventDefault();
    event.target.parentNode.parentNode.remove();
}

atualizar(event) {
    event.preventDefault();
    event.target //Que metodo posso utilizar para pegar os valores do formulario e atualizar ?
    this._inputData = $('#data');
    this._inputQuantidade = $('#quantidade');
    this._inputValor = $('#valor');

}
_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();
}

}

How can I implement my update by receiving form values consequently updating my line?

    
asked by anonymous 04.07.2018 / 23:11

0 answers