[javascript] Knockout.js에서 데이터 소팅 및 필터링 처리 방법은?

21 Nov 2023

javascript

Knockout.js는 강력한 데이터 바인딩 라이브러리로, 데이터의 소팅 및 필터링을 간단하게 처리할 수 있습니다. 이를 통해 사용자는 웹 애플리케이션에서 동적으로 데이터를 정렬하거나 필터링하여 효율적으로 작업할 수 있습니다.

데이터 소팅을 위해 Knockout.js에서는 observableArray를 사용합니다. observableArray는 배열에 대한 관찰 가능한 기능을 제공하여 배열이 변경될 때 자동으로 업데이트되는 것을 보장합니다. 이를 활용하여 데이터를 동적으로 정렬할 수 있습니다.

아래는 Knockout.js를 사용하여 데이터를 소팅하는 예제입니다:

// ViewModel 정의
function ViewModel() {
    var self = this;
    
    // 데이터 배열
    self.items = ko.observableArray([
        { name: 'Apple', price: 1.99 },
        { name: 'Banana', price: 0.99 },
        { name: 'Orange', price: 2.49 }
    ]);

    // 정렬 방식을 선택하는 observable 변수
    self.sortOrder = ko.observable('asc'); // 'asc' 또는 'desc'

    // 소팅 로직
    self.sortedItems = ko.computed(function () {
        var sortedArray = self.items().slice(); // 배열 복사

        // 정렬 방식에 따라 데이터를 정렬
        if (self.sortOrder() === 'asc') {
            sortedArray.sort(function (a, b) {
                return a.price - b.price;
            });
        } else {
            sortedArray.sort(function (a, b) {
                return b.price - a.price;
            });
        }

        return sortedArray;
    });
}

// ViewModel 인스턴스 생성
var vm = new ViewModel();

// Knockout 바인딩 시작
ko.applyBindings(vm);

위 예제에서 observableArray인 items를 사용하여 데이터를 관리하고, observable인 sortOrder를 사용하여 정렬 방식을 선택합니다. 그리고 ko.computed 함수를 사용하여 sortedItems를 계산하고, sortOrder가 변경될 때마다 해당 컴퓨티드를 자동으로 업데이트합니다.

이와 유사한 방식으로 데이터 필터링을 처리할 수도 있습니다. 필요한 경우 computed 함수나 subscribe 함수 등도 함께 활용하여 데이터의 동적인 소팅 및 필터링을 구현할 수 있습니다.

참고 문서:

Knockout.js Documentation