-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
각 탭을 클릭할때 active class 변화 책임
21.08.22 17:59 작성 조회수 114
0
각 탭을 클릭할때 탭의 active class 변화의 책임이 TabView.js에 있다고 생각해서 TabView클래스 안에서 처리하도록 했습니다.
선택된Tab의 상태를 Controller에게 알리기 전에 View에서 선택된 Tab을 render를 하는것이 MVC 패턴에서 어긋나는 부분인가요?
아래 코드 : 탭상태변화를 바로 View에 반영하고 이벤트발생
// ✨
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();
}
전체코드
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
}
답변을 작성해보세요.
0
김정환
지식공유자2021.09.06
역할 부여하는 것은 관점에 따라 얼마든지 달라질 수 있다고 생각합니다. 말씀하신대로 TabView의 역할이라고 생각하고 진행하셔도 괜찮습니다.
답변 1