Olá! Consegui criar o exercício com a mesma solução do instrutor, apenas em um index.html. Porém, estou tentando colocar no modo MVC e fiquei com algumas dúvidas.
Sem modo MVC:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="listaFuncionarios"></div>
<script>
let funcionarios = [
{
"nome": "Douglas",
"endereco" : "Rua da esquina, 123",
"salario" : "4500"
},
{
"nome": "Felipe",
"endereco" : "Rua da virada, 456",
"salario" : "5000"
},
{
"nome": "Silvio",
"endereco" : "Rua da aresta, 789",
"salario" : "6000"
}
];
let template =
`
<table>
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Salário</th>
</tr>
</thead>
<tbody>
${funcionarios.map( lista => `
<tr>
<td>${lista.nome}</td>
<td>${lista.endereco}</td>
<td>${lista.salario}</td>
</tr>
`).join('')}
<tbody>
</table>
`;
let $ = document.querySelector.bind(document);
$('#listaFuncionarios').innerHTML = template;
</script>
</body>
</html>Com modo MVC:
Criei a seguinte arquitetura de pastas:
- js/app/
controllers/FuncionariosController.js models/FuncionariosModel.js views/FuncionariosView
Códigos:
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="listaFuncionarios"></div>
<script src="js/app/models/FuncionariosModel.js"></script>
<script src="js/app//views/FuncionariosView.js"></script>
<script src="js/app/controllers/FuncionariosController.js"></script>
<script>
let funcionariosController = new FuncionarioController();
</script>
</body>
</html>No Models:
//FuncionariosModel.js
class FuncionariosModel {
constructor( nome, endereco, salario ){
this._nome = nome;
this._endereco = endereco;
this._salario = salario;
}
get listaFuncionarios() {
let funcionarios = [
{
"nome": "Douglas",
"endereco" : "Rua da esquina, 123",
"salario" : "4500"
},
{
"nome": "Felipe",
"endereco" : "Rua da virada, 456",
"salario" : "5000"
},
{
"nome": "Silvio",
"endereco" : "Rua da aresta, 789",
"salario" : "6000"
}
];
}
}Na View:
class FuncionariosView {
constructor( elemento ){
this._elemento = elemento;
}
_template( model ){
`
<table>
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Salário</th>
</tr>
</thead>
<tbody>
${model.funcionarios.map( lista => `
<tr>
<td>${lista.nome}</td>
<td>${lista.endereco}</td>
<td>${lista.salario}</td>
</tr>
`).join('')};
<tbody>
</table>
`
}
lista( model ){
this._elemento.innerHTML = this._template(model);
}
}No Controller:
class FuncionarioController {
constructor(){
let $ = document.querySelector.bind(document);
this._funcionariosModel = new FuncionariosModel();
this._funcionariosView = new FuncionariosView($('#listaFuncionarios'));
}
}
Fiquei perdida na parte do controller. Ainda não consegui fazer aparecer no index.html a lista de funcionários. Poderia me dar uma dica, por favor, ou apontar onde estou errando? Seria algum método que está faltando no controller?
