작성
·
182
0
각 탭을 클릭할때 탭의 active class 변화의 책임이 TabView.js에 있다고 생각해서 TabView클래스 안에서 처리하도록 했습니다.
선택된Tab의 상태를 Controller에게 알리기 전에 View에서 선택된 Tab을 render를 하는것이 MVC 패턴에서 어긋나는 부분인가요?
아래 코드 : 탭상태변화를 바로 View에 반영하고 이벤트발생
전체코드
export default class TabView extends View {
constructor() {
console.log(tag, "constructor");
super(qs("#tab-view"));
this.template = new Template();
// TODO
this.bindEvents();
}
// ✨
bindEvents() {
this.element.addEventListener("click", this.handleTabClick.bind(this));
}
// ✨
handleTabClick(e) {
this.show(e.target.dataset.tab);
this.emit("@tabChanged", { tab: e.target.dataset.tab });
e.stopPropagation();
}
show(selectedTab) {
this.element.innerHTML = this.template.getTabList();
qsAll("li", this.element).forEach((li) => {
li.className = li.dataset.tab == selectedTab ? "active" : "";
});
super.show();
}
// this가 이벤트 객체로 바인딩 되었다.
// this --- e.currentTarget
// this --- TabView
}