Knockout.js에서 데이터 정렬 및 필터링 방법

Knockout.js는 데이터 바인딩과 함께 많은 유용한 기능을 제공하는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 데이터를 정렬하고 필터링하는 방법에 대해 알아보겠습니다.

데이터 정렬

Knockout.js는 배열 데이터를 정렬하기 위해 sortable binding을 제공합니다. 이 binding은 기본적으로 오름차순으로 데이터를 정렬하지만, 사용자 정의 정렬 함수를 사용하여 원하는 방식으로 데이터를 정렬할 수도 있습니다.

다음은 데이터를 정렬하는 간단한 예제입니다.

<div data-bind="foreach: items">
  <div data-bind="text: name"></div>
</div>

<button data-bind="click: sortByName">이름으로 정렬</button>
<button data-bind="click: sortByAge">나이로 정렬</button>

<script>
  const viewModel = {
    items: ko.observableArray([
      { name: 'John', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Bob', age: 20 }
    ])
  };

  viewModel.sortByName = function() {
    viewModel.items.sort(function(a, b) {
      return a.name.localeCompare(b.name);
    });
  };

  viewModel.sortByAge = function() {
    viewModel.items.sort(function(a, b) {
      return a.age - b.age;
    });
  };

  ko.applyBindings(viewModel);
</script>

위 예제에서는 items라는 observableArray에 세 명의 사람 정보가 들어있습니다. 이름으로 정렬하기 위해 sortByName 함수를 호출하고, 나이로 정렬하기 위해 sortByAge 함수를 호출합니다. 각 함수는 sort 메서드를 사용하여 배열을 정렬합니다. sort 메서드는 사용자 지정 정렬 함수를 인수로 받습니다.

데이터 필터링

Knockout.js에서는 데이터를 필터링하기 위해 visible binding을 사용할 수 있습니다. 이 binding은 조건을 기반으로 엘리먼트를 보이거나 숨기는데 사용됩니다.

다음은 데이터를 필터링하는 예제입니다.

<input type="text" data-bind="value: filterValue, valueUpdate: 'keyup'" placeholder="검색어를 입력하세요">
  
<div data-bind="foreach: items">
  <div data-bind="text: name, visible: $parent.filterItem.bind($data)"></div>
</div>

<script>
  const viewModel = {
    items: ko.observableArray([
      { name: 'John', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Bob', age: 20 }
    ]),
    filterValue: ko.observable('')
  };

  viewModel.filterItem = function(data) {
    const filterValue = viewModel.filterValue().toLowerCase();
    if (filterValue === '') {
      return true;
    }
    return data.name.toLowerCase().indexOf(filterValue) !== -1;
  };

  ko.applyBindings(viewModel);
</script>

위 예제에서는 검색어를 입력할 수 있는 input 요소와 데이터 목록을 출력하는 div 요소가 있습니다. 데이터를 필터링하기 위해 filterValue라는 observable을 사용합니다. filterItem 함수는 데이터를 받아와 검색어와 일치하는지 확인하고, 일치하는 경우에만 해당 데이터를 보여줍니다.

이렇게 Knockout.js에서 데이터를 정렬하고 필터링하는 방법을 간단히 소개해보았습니다. Knockout.js에는 데이터 처리를 위한 다양한 기능이 있으니 더 자세한 내용은 공식 문서를 참고하시기 바랍니다.

참고 자료

Knockout.js 공식 문서