Knockout.js는 웹 애플리케이션에서 데이터 바인딩을 쉽게 구현할 수 있는 자바스크립트 라이브러리입니다. 데이터 필터링은 원하는 조건에 맞는 데이터만 표시하는 기능으로, Knockout.js를 사용하면 이를 간편하게 구현할 수 있습니다.

먼저, 데이터 모델을 정의해야 합니다. 이 모델은 Knockout.js의 Observable 객체를 사용하여 데이터 변경을 감지하고 자동으로 업데이트되도록 만들어줍니다. 예를 들어, 다음과 같이 데이터 모델을 만들 수 있습니다.

function ViewModel() {
  var self = this;

  self.items = ko.observableArray([
    { name: 'item 1', category: 'A' },
    { name: 'item 2', category: 'B' },
    { name: 'item 3', category: 'A' },
    { name: 'item 4', category: 'C' },
  ]);

  self.filteredItems = ko.observableArray(self.items());
  self.selectedCategory = ko.observable('All');

  self.filterItems = function() {
    if (self.selectedCategory() === 'All') {
      self.filteredItems(self.items());
    } else {
      self.filteredItems(self.items().filter(function(item) {
        return item.category === self.selectedCategory();
      }));
    }
  };
}

ko.applyBindings(new ViewModel());

위의 코드에서는 items라는 배열에 아이템들을 저장하고, 원하는 카테고리를 선택할 수 있는 selectedCategory 변수를 사용합니다. filterItems 함수는 선택한 카테고리에 따라 해당하는 아이템만 filteredItems에 저장합니다.

이제 HTML 코드에서 데이터를 바인딩하고, 필터링된 결과를 표시할 수 있습니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

<select data-bind="options: ['All', 'A', 'B', 'C'], value: selectedCategory, event: { change: filterItems }"></select>

<ul data-bind="foreach: filteredItems">
  <li data-bind="text: name"></li>
</ul>

위의 코드에서는 select 요소를 만들어 카테고리 선택을 제공하고, filterItems 함수가 선택된 카테고리가 변경될 때 실행되도록 설정합니다. ul 요소는 filteredItems 배열을 순회하며 아이템 이름을 표시합니다.

이렇게 Knockout.js를 사용하여 데이터 필터링을 구현할 수 있습니다. 추가적으로 Knockout.js의 다른 기능을 활용하여 데이터 바인딩 및 이벤트 처리 등을 구현할 수도 있습니다.

참고 문서:

• Knockout.js 공식문서