View

18번째 줄 : bindRemoveBtn은 버튼에 이벤트를 달아주기 위함이다. (Click, onRemove())

21. e.stopPropagation : 상위에 이벤트를 전파하는 것을 방지하는 것

button이 아닌 li태그에 이벤트가 전파되는것을 방지하기 위해 사용 했다.

23. onRemove(btn.parentElement.dataset.keyword)

onRemove는 MainController에 데이터를 보내기 위해 만들어 진것

파라미터 값은 btn의 부모태그인 li태그의 데이터셋

`<li data-keyword="${item.keyword}">

28. onRemove : 파라미터값은 histroy의 keyword(검색기록)

Controller

init(){

      HistoryView.setup(document.querySelector('#search-history'))
      HistoryView.on('@remove', e=>this.onRemoveHistory(e.detail.keyword))
},

      onRemoveHistory(keyword){
        HistoryModel.remove(keyword)
        this.renderView()
      },

    renderView() {
        console.log(tag, 'rednerView()')
        TabView.setActiveTab(this.selectedTab)
        if (this.selectedTab === '추천 검색어') {
          this.fetchSearchKeyword()
          HistoryView.hide()
        } 
        else {
          this.fetchSearchHistoryword()
          KeywordView.hide()
        },

      fetchSearchHistoryword(){
        HistoryModel.list().then(data => {
          HistoryView.render(data).bindRemoveBtn()
        })
      },

KeywordView.on('@click', e=>this.onClickKeyword(e.detail.keyword))

      onClickKeyword(keyword) {
        this.search(keyword)
      },


    search(query){
      FormView.setValue(query)
      HistoryModel.add(query)

},

1.init() : setup을 통해 HistoryView객체에 태그 저장

on을 통해 @remove이벤트(View)와 연결

@remove 발생시 @remove의 detail.keyword에 저장된 데이터(HistoryView.js → View.js)

를 파라미터로 onRemoveHistory를 실행

2.onRemoveHistory는 그 데이터를

HistoryModel의 remove 메소드를 이용시킨 후

  remove(keyword) {

    this.data = this.data.filter(item => item.keyword !== keyword)

}

변화가 있었기에 renderView를 불러와서 리로드 시킴

3. renderView는 이제 selectedTab의 값에 따라서

fetchSearchKeyword와

fetchSearchHistory 중 하나를 실행한다.

4. fetchSearchHistory : 이제 History를 패치한다.

list()를 불러와서 데이터를 훏고

그 데이터들은 HistoryView을 render해주고 render값에 bindRemoveBtn()으로 이벤트를 달아준다.

5.Keyword를 클릭했을 때, HistoryModel의 데이터 항목을 추가 하려고 하기 때문에 이벤트를 달아준다.

6.onClickKeyword는 키워드를 클릭시 발생

7.search는

FormView.setValue(query) - input태그의 value값을 keyword로 바꾸어 줌

HistoryModel.add(query)는 HistoryModel에 데이터를 추가함

  add(keyword = '') {

    keyword = keyword.trim()

    if (!keyword) return 

    if (this.data.some(item => item.keyword === keyword)) {

      this.remove(keyword)

}

Model

export default {
  data: [
    { keyword: '검색기록2', date: '12.03' },
    { keyword: '검색기록1', date: '12.02'},
    { keyword: '검색기록0', date: '12.01' },
  ],//컬렉션 형식

  list() {
    return Promise.resolve(this.data)
  },//위 데이터를 리턴하는 것
  
  add(keyword = '') {
    keyword = keyword.trim()
    if (!keyword) return 
    if (this.data.some(item => item.keyword === keyword)) {
      this.remove(keyword)
    }

    const date = '12.31'
    this.data = [{keyword, date}, ...this.data]
  },
  
  remove(keyword) {
    this.data = this.data.filter(item => item.keyword !== keyword)
  }