[VanillaJS] 결과창(ResultView) 생성하기

View

15. render를 한다.

결과창을 나타 낼 div태그에 innerHTML로써 결과를 입력해낸다.

16. data.length 결과값에 따라 this.getKeywordHtml(data) 혹은 NO.KEYWORDS_message를 출력한다.

18.this.show()가 필요한 이유는 최근 검색어 추천 검색어 시에 ResultView를 hide시키기 때문이다.

고로 render시에 show()를 한다.

21. getKeywordHtml()

말 그대로 결과값을 얻기 위해 생성하는것

reduce함수를 사용하였다.

다만 여기서 특이한건 변수 html에 더해질 값을 또 함수로 만들었다는 것이다.

Controller

export default{

init(){

            ResultView.setup(document.getElementById('search-result'))

         FormView.on('@submit', e => this.onSubmit(e.detail.input))

},

onSubmit(input){

console.log(tag, 'onSubmit()', input)

this.search(input)

},

search(query){

FormView.setValue(query)

HistoryModel.add(query)

SearchModel.list().then(data => {

this.onSearchResult(data)

})//data = SearchModel의 정보들, query는 input의 value

},

onSearchResult(data) {

TabView.hide()

KeywordView.hide()

HistoryView.hide()

ResultView.render(data)

},

1. init()시에 setup한다.

2. 폼 태그에서 검색 시의 검색 결과 이므로 @submit 이벤트에 연결 한다.

3.  Search를 이용하여 SearchModel의 데이터를 가져온다 이 때, Form의 submit을 하는 순간 결과 값을 fetch해야 하므로 search함수에 삽입했다.

그리고  onSearchResult를 받은 data를 파라미터 값으로 실행시킨다.

onSearchResult는 ResultView를 렌더시키고 나머지 모든 객체를 hide()시킨다.

Model

const data = [

{

id: 1,

name: '[키친르쎌] 홈메이드 칠리소스 포크립 650g',

image: 'https://cdn.bmf.kr/_data/product/H1821/5a4ed4e8a6751cb1cc089535c000f331.jpg'

},

{

id: 2,

name: '[키친르쎌] 이탈리아 파티 세트 3~4인분',

image: 'https://cdn.bmf.kr/_data/product/H503E/300d931e3b8252ed628b6a3c2f56936b.jpg'

}

]

export default {

list(query) {

return new Promise(resolve => {

setTimeout(()=> {

resolve(data)

}, 200);

})

}

}