Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Duvida em relacao ao MVC

Bom dia a todos :) Primeiramente gostaria de agradecer a todos que já me ajudaram, sinto que cresci muito com a Alura.

Bem quero entender bem o modelo mvc, terminei o modulo 1 de javascript avançado e eu durante o curso entendia mas não vinha da minha mente o que estava sendo feito e isso me deixa um pouco inseguro, então como sempre decidi criar um modelo para treinar. Se resume em uma lista de contatos, basicamente isso, vamos ao código e explicação e assim alguém pode talvez entender minha duvida.

Model:

class Contact{
  constructor(name,company){    
    this._name = name;
    this._company = company;     
  }
  get name(){
    return this._name;
  }
  get company(){
    return this._company;
  } 
}

Bem, aqui tenho modelo de contatos, no qual tem o nome e a empresa na qual trabalha. Acho que aqui não tem nada errado, criei entao uma lista de contatos, uma classe que contem um array que receberá os contatos (Bem como a lista de negociacoes do modulo 1)

class ContactList{
  constructor(){
    this._contacts = [];
  }

  // contatos concatenados para o innerHTML
  get contacts(){
    return [].concat(this._contacts);
  }

// metodo para adicionar um novo contato

  addContact(contact){
    this._contacts.push(contact);
  }
}

Então criei um view

class ContactView{

  constructor(elemento){
    this._elemento = elemento;
  }

  _template(model){
    return `${model.contacts.map((n) => 
               `<div class="name">
                   ${n.name}
                </div>
                <div class="company">
                 ${n.company}
                 </div>`)}`;                     
}

// Atualizacao da view
  update(model){
    this._elemento.innerHTML = this._template(model);
  }

}

Acho que o controller é aonde mais ta pegando pra mim :/ Na minha cabeça entendimento o controller é basicamente a cola que liga o V e o M porém o que eu estou fazendo está dando errado

class Controller {

//Instanciei o que deveria
  constructor(){ 
    this._contactsList = new ContactList();
    this._contactsView = new ContactView($(".name-body"));  
  }
  // Entao fiz o metodo que cria um novo contato que está ligado ao addContact
_createContact(name,company){
    return new Contact(name,company);
  }

  // Aqui que está dando errado, acho que formulei errado mas juro que nao sei o que é.

  addContact(name,company){
  this._contactList.addContact(this._createContact(name,company));
   this._contactView.update(this._contactList);
  }

}

Ao tentar: let controller = new Controller(); retorna:

 Controller {_contactsList: ContactList, _contactsView: ContactView}
_contactsList: ContactList {_contacts: Array(0)}
_contactsView: ContactView {_elemento: div.name-body}
__proto__: Object

Mas ao tentar controller.addContact('Pedro Braga','Caelum'/Alura); (Nunca é demais sonhar alto né? hahahaha) retorna isso: Cannot read property 'addContact' of undefined.

Não entendi pois achei que como estou colocando os parâmetros no addContact e ele chama o método createContact, que possui os mesmo parâmetros, ele acabaria criando um contato mas da erro :/

Sei que está longo e talvez mal explicado, mas ta ai, quem puder me ajudar seria muito bom hahaha Quero entender BEM isso antes de dar continuidade.

Gostaria de saber também se alguém possui tipo uma lista de exercícios no qual eu possa praticar o modelo mvc, exemplos como este que eu estou fazendo, acredito que a pratica é o melhor caminho para consolidação e perfeição.

Desde já agradeço :)

3 respostas
solução!

Boa tarde, Pedro! Como vai?

Repare que dentro da classe Controller vc faz:

constructor(){ 
     this._contactsList = new ContactList();
     this._contactsView = new ContactView($(".name-body"));  
}

Criando os atributos _contactsList e _contactsView. No entanto, no método addContato() vc faz:

addContact(name,company){
     this._contactList.addContact(this._createContact(name,company));
     this._contactView.update(this._contactList);
}

Usando _contactList e _contactView sem o s no final da palavra "contact", por isso vc está obtendo esse erro uma vez que esses dois caras nunca foram criados! Só altere para o nome correto dos atributos e tudo funcionará corretamente.

Isso demonstra que ao que tudo indica vc conseguiu absorver bem e corretamente os conceitos passados pelo Flávio durante o treinamento!

Sobre a lista de exercícios, infelizmente não tenho, mas nada impede de vc criar outros cenários da mesma forma como fez dessa vez!

Grande abraço e bons estudos.

Nossa, muito obrigado. Duvida bobinha :/

Ainda bem então que andei pelo caminho certo hahhah

Por nada! Agora é só mandar bronca na sequência dos estudos!

E qualquer coisa, se surgir alguma dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!