[javascript] Knockout.js에서 데이터 필터 및 정렬 방법은?

21 Nov 2023

javascript

Knockout.js는 데이터 바인딩과 상호 작용을 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 데이터 필터링과 정렬은 Knockout.js에서 많이 사용되는 기능 중 하나입니다. 이 기능을 사용하여 데이터를 동적으로 필터링하고 정렬할 수 있습니다.

데이터 필터링을 구현하는 방법은 간단합니다. 먼저, 필터링하려는 데이터를 관리하는 Observable 배열을 생성합니다. 그런 다음, 필터링을 위해 사용자 입력 또는 다른 조건에 따라 데이터를 걸러내는 함수를 작성합니다. 이 함수는 computed Observable로 정의됩니다.

아래는 데이터 필터링을 구현하는 예제입니다:

// ViewModel
function ViewModel() {
   var self = this;
   self.allItems = ko.observableArray([
       { name: 'Apple', type: 'Fruit', price: 1.99 },
       { name: 'Carrot', type: 'Vegetable', price: 0.99 },
       { name: 'Banana', type: 'Fruit', price: 0.79 },
       // ... other items
   ]);

   self.filterVal = ko.observable('');

   self.filteredItems = ko.computed(function () {
       var filter = self.filterVal().toLowerCase();
       if (!filter) {
           return self.allItems();
       } else {
           return ko.utils.arrayFilter(self.allItems(), function (item) {
               return item.name.toLowerCase().indexOf(filter) !== -1 ||
                      item.type.toLowerCase().indexOf(filter) !== -1;
           });
       }
   });
}

// Apply bindings
ko.applyBindings(new ViewModel());

위의 코드에서 allItems는 조건에 따라 필터링할 데이터를 담고 있는 Observable 배열이며, filterVal은 사용자 입력을 담는 Observable입니다. filteredItems는 데이터를 필터링한 결과를 담는 computed Observable입니다. 이 computed Observable은 필터링된 데이터를 반환하며, 사용자 입력이 변경될 때마다 자동으로 갱신됩니다.

데이터 정렬을 구현하는 방법도 유사합니다. 이 경우에는 필터링과 마찬가지로 데이터를 관리하는 Observable 배열을 생성하고, 정렬 기준을 바꿀 수 있는 사용자 입력을 감지하고 이에 따라 데이터를 정렬하는 함수를 작성합니다.

아래는 데이터 정렬을 구현하는 예제입니다:

// ViewModel
function ViewModel() {
   var self = this;
   self.allItems = ko.observableArray([
       { name: 'Apple', type: 'Fruit', price: 1.99 },
       { name: 'Carrot', type: 'Vegetable', price: 0.99 },
       { name: 'Banana', type: 'Fruit', price: 0.79 },
       // ... other items
   ]);

   self.sortBy = ko.observable('name');

   self.sortedItems = ko.computed(function () {
       var sortBy = self.sortBy();
       return self.allItems().sort(function (a, b) {
           return a[sortBy]().localeCompare(b[sortBy]());
       });
   });
}

// Apply bindings
ko.applyBindings(new ViewModel());

위의 코드에서 allItems는 정렬할 데이터를 담고 있는 Observable 배열이며, sortBy는 정렬 기준을 나타내는 Observable입니다. sortedItems는 데이터를 정렬한 결과를 담는 computed Observable입니다. 이 computed Observable은 데이터를 정렬한 후 반환하며, 정렬 기준이 변경될 때마다 자동으로 갱신됩니다.

이렇게 Knockout.js를 사용하면 데이터 필터링과 정렬을 간편하게 구현할 수 있습니다. 더 자세한 내용은 Knockout.js 공식 문서(https://knockoutjs.com/)를 참조하시기 바랍니다.