Knockout.js는 자바스크립트 기반의 MVVM 패턴 프레임워크로, 동적인 웹 애플리케이션 개발을 위한 강력한 도구입니다. 이번에는 Knockout.js를 사용하여 웹 페이지에 검색 기능을 구현하는 방법을 알아보겠습니다.
1. 검색 기능 구현을 위한 HTML
먼저, 검색 기능을 적용할 웹 페이지의 HTML 구조를 작성합니다. 예를 들어, 다음과 같은 형태의 간단한 검색 폼을 구현해보겠습니다.
<div id="search-form">
<input type="text" data-bind="value: searchQuery, valueUpdate: 'input'" placeholder="검색어를 입력하세요">
<button data-bind="click: search">검색</button>
</div>
<ul id="search-results" data-bind="foreach: filteredItems">
<li data-bind="text: $data"></li>
</ul>
위의 HTML 코드에서는 검색어를 입력하는 input 요소와 검색 버튼을 포함하고 있습니다. 검색 결과는 ul 요소 안에 동적으로 표시되며, 검색 결과가 없을 경우 아무 내용도 표시되지 않습니다.
2. View Model 설정
Knockout.js는 View Model을 통해 데이터와 뷰를 바인딩하고 관리합니다. 따라서, 아래와 같이 View Model을 설정해줍니다.
function SearchViewModel() {
var self = this;
self.searchQuery = ko.observable('');
self.items = ko.observableArray(['Apple', 'Banana', 'Orange', 'Grape']);
self.filteredItems = ko.computed(function() {
var searchQuery = self.searchQuery().toLowerCase();
if (!searchQuery) {
return self.items();
} else {
return ko.utils.arrayFilter(self.items(), function(item) {
return item.toLowerCase().indexOf(searchQuery) !== -1;
});
}
});
self.search = function() {
// 검색 기능 구현을 위한 로직 작성
// 예제에서는 필터링된 결과를 console에 출력하는 것으로 가정
console.log(self.filteredItems());
};
}
ko.applyBindings(new SearchViewModel(), document.getElementById('search-form'));
위의 코드에서는 SearchViewModel을 생성하고, searchQuery 프로퍼티와 items 배열을 정의하고, filteredItems 계산된 프로퍼티를 구현하였습니다. filteredItems는 searchQuery를 기준으로 items에서 필터링된 결과를 반환합니다. search 함수는 검색 버튼을 클릭했을 때 실행되며, 필터링된 결과를 출력하는 예시입니다.
3. 검색 기능 적용
위의 코드를 웹 페이지에 포함시키기 위해 다음과 같이 스크립트 태그를 작성합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<script>
// 위에서 작성한 View Model 설정 코드
</script>
Knockout.js를 CDN을 통해 가져오고, View Model 설정 코드를 스크립트 태그 안에 작성하여 웹 페이지에 포함시킵니다.
이제 웹 페이지를 열어서 검색어를 입력하고 검색 버튼을 클릭하면, 검색어에 해당하는 항목들이 동적으로 표시될 것입니다.
마무리
이제 Knockout.js를 사용하여 웹 페이지에 검색 기능을 구현하는 방법을 알아보았습니다. Knockout.js를 사용하면 복잡한 데이터 바인딩과 상태 관리를 간편하게 처리할 수 있으며, 동적인 웹 애플리케이션 개발에 유용한 도구입니다. 더 많은 기능과 사용법을 익히고 싶다면 공식 Knockout.js 문서를 참고해보세요.