1
When I mount my table dynamically only my first element is mounted correctly. Others print a strange datum [Htmlinputelement Object]
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>
Listproducts
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);
}
}
Produtoview
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>
`; }
}
Productocontroller
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();
}
}
MISPRINT
Note that in the controller you are capturing the element itself, not its value:
this._inputValor = $('#valor'). If you want the value, you need to get the value of the widget with the.valueor.val(), depending on how to do.– Woss
I really forgot to put . value . Fixed but Error persists..
– Felipe Machado
That’s the whole code?
– Sam
no, it has html and model,I thought the error was not in this part and by not polluting the question I posted but I will post the rest
– Felipe Machado
HTML does not need to post.
– Sam
Code was posted that was not placed for analysis.
– Felipe Machado
When you click save this tabelinha is updated, taking the form values, this is it?
– Sam
Here, for example:
this._inputQuantidade = $('#quantidade');I seem to be missing one.val()– Sam
This, the idea is to take the form values in Productocontroller capturing the values in your constructor ,for being a controller class we need to instantiate the views and lists we use. After instantiating Productoview I receive by parameter the id(productView )of my div that I added in html to generate the table dynamically, as you said the table is updated as forinserting . I believe it gave +- to pass the idea.
– Felipe Machado
this._inputQuantidade = $('#quantidade');does not need the . value ,for what type it is receiving from the form only to be able to feed our product object, which in the same we declare the . value.– Felipe Machado
I’m not very knowledgeable in this syntax. Try
${p.quantidade.value}, since you are returning the element.– Sam
It worked dvd ,following your suggestion put . value in the elements that is not the name and funfou ,put the answer that I put as solved,worth by force!
– Felipe Machado