1
resposta

FIZ EM MODELO MVC - Funcionando

index

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Nome</th>
                <th>Endereço</th>
                <th>Salário</th>
            </tr>
        </thead>
    </table>
    <tbody>
        <div id="impressao"></div>
    </tbody>

    <script src="./FuncionariosModel.js"></script>
    <script src="./ListaFuncionariosModel.js"></script>
    <script src="./FuncionariosView.js"></script>
    <script src="./FuncionariosController.js"></script>
<script>
    let funcionarios = new FuncionariosController();
</script>
</body>
</html>

FuncionariosModel.js (obs: não quis encapsular)

class Funcionarios {
    constructor(nome, endereço, salario){
        this._nome = nome
        this._endereço = endereço
        this._salario = salario
    }
}

ListaFuncionariosModel.js

class ListaFuncionarios { // essa class existe para transformar os dados recebidos em um array
    constructor(){
        this._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"
            }
        ];
    }
}

FuncionariosView.js

class FuncionariosView {
    constructor(elemento) {
        this._elemento = elemento
    }

    _retorno(model) {

        return`
        <tbody> 
         ${model._funcionarios.map(n =>
            `<tr><br>
                <td>${n.nome}</td><br>
                <td>${n.endereco}</td><br>
                <td>${n.salario}</td><br>
            </tr><br>`
        ).join('')}
        </tbody>`
    }

    update(model) {
        this._elemento.innerHTML = this._retorno(model);
    }
}            

FuncionariosController.js

class FuncionariosController {
    constructor(){
        this._funcionarios = new ListaFuncionarios();
        this._funcionariosView = new FuncionariosView(document.querySelector('#impressao'));
        this._funcionariosView.update(this._funcionarios); //chamando update e inserindo a lista de negociaçoes
    }
}
1 resposta

Oi Luzineide, tudo bem?

Muito obrigada por compartilhar com a gente o seu código! E parabéns por praticar sempre a cada aula, essa parte é super importante para a consolidação do seu conhecimento.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software