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 :)