When I mount my table dynamically only my first element is mounted correctly. The others print a strange data [object HTMLInputElement]
index
<!DOCTYPE html>
Product
<h1 class="text-center">Cadastro Produto</h1>
<form class="form" onsubmit="produtoController.adicionar(event)">
<div class="form-group">
<label for="nome">Nome</label>
<input type="text" id="nome" 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">Salvar</button>
</form>
<br>
<br>
<div id="produtoView"></div>
<script src="js/app/model/Produto.js"></script>
<script src="js/app/controller/ProdutoController.js"></script>
<script src="js/app/model/ListaProdutos.js"></script>
<script src="js/app/view/View.js"></script>
<script src="js/app/view/ProdutoView.js"></script>
<script>
let produtoController = new ProdutoController()
</script>
Product List
class ListaProdutos {
constructor() {
this._produtos = [];
}
adiciona(produto) {
this._produtos.push(produto);
}
get produtos() {
return [].concat(this._produtos)
}
Product
class Produto {
constructor(nome, quantidade, valor) {
this._nome = nome;
this._quantidade = quantidade;
this._valor = valor;
}
get nome() {
return this._nome;
}
get quantidade() {
return this._quantidade = quantidade;
}
get valor() {
return this._valor = valor;
}
}
}
View
class View {
constructor(elemento) {
this._elemento = elemento;
}
template() {
throw new Error("O metodo template deve ser implementado");
}
update(model) {
this._elemento.innerHTML = this.template(model);
}
}
ProductView
class ProdutoView extends View {
constructor(elemento) {
super(elemento);
}
template(model) {
return '
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>NOME</th>
<th>QUANTIDADE</th>
<th>VALOR</th>
</tr>
</thead>
<tbody>
${model.produtos.map(p => '
<tr>
<td>${p.nome}</td>
<td>${p.quantidade}</td>
<td>${p.valor}</td>
</tr>
')}
</tbody>
<tfoot>
</tfoot>
</table>
'; }
}
ProductController
class ProdutoController {
constructor() {
// VALORES EXTRAIDOS DOS FORMULARIOS
let $ = document.querySelector.bind(document);
this._inputNome = $('#nome');
this._inputQuantidade = $('#quantidade');
this._inputValor = $('#valor');
//INSTANCIAR A LISTA
this._listaProdutos = new ListaProdutos();
//INSTANCIAR A VIEWS
this._produtoView = new ProdutoView($('#produtoView'));
this._produtoView.update(this._listaProdutos);
}
//EVENTOS
adicionar(event) {
event.preventDefault();
this._listaProdutos.adiciona(this._criaProduto());
this._produtoView.update(this._listaProdutos);
this._limparFormulario();
}
_criaProduto() {
return new Produto(this._inputNome.value, this._inputQuantidade.value, this._inputValor.value);
}
_limparFormulario() {
this._inputNome.value = '';
this._inputQuantidade.value = 1;
this._inputValor.value = 0;
this._inputNome.focus();
}
}
ERROR PRINT
