CollectionView로 데이터 로드

CollectionView 클래스에서 사용되는 객체 모델은 .NET의 ICollectionView 및 IPagedCollectionView 인터페이스에서 규정한 것과 유사합니다.

__CollectionView__에 데이터를 로드하는 것은 간단합니다.

클라이언트 측

배열에 데이터가 이미 있는 경우 해당 배열을 생성자 매개변수로 사용하거나 sourceCollection 속성을 해당 배열로 설정할 수 있습니다.

다음은 JSON 개체 배열을 사용하는 두 가지 접근 방식의 예입니다.

import * as wijmo from '@grapecity/wijmo';

let data = [
    { id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 },
    { id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 },
    { id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 },
    { id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 },
    { id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 },
    { id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 },
    { id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 },
    { id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 },
    { id: 9, country: 'Denmark', gdpm: 295091, popk: 5660, gdpcap: 52136 },
    { id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 }
]

// create CollectionView object with data
let cv = new wijmo.CollectionView(data);
//or
let cv = new wijmo.CollectionView();
cv.sourceCollection = data;

서버 측

데이터가 서버에 있는 경우, httpRequest 메서드를 사용하여 데이터를 검색할 수 있습니다. 서버에서 응답이 오면, sourceCollection 배열을 응답 값으로 설정하거나 새 데이터를 sourceCollection 배열에 추가합니다.

예시

let view = new wijmo.CollectionView();
...
wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Categories', {
    data: {
        $format: 'json',
        $select: 'CategoryID,CategoryName,Description'
    },
    success: (xhr) => {
        // got the data, assign it to the CollectionView
        let response = JSON.parse(xhr.response);
        let data = response.d ? response.d.results : response.value;

        // use the result as the sourceCollection
        view.sourceCollection = data;
    }
});

데이터 서비스 API가 필터링, 정렬 및 페이징과 같은 명령을 지원하는 경우, httpRequest 호출에 매개 변수를 추가하여 이 명령을 지원할 수 있습니다. __CollectionView__를 확장하는 사용자 정의 클래스로 서버 API를 캡슐화할 수도 있습니다.

사용자 지정 서버 기반 CollectionView 클래스의 간단한 예는 ServerCollectionView 샘플을 참고하시길 바랍니다.

CRUD 작업을 완벽하게 지원하는 더 완전한 예제를 보려면, Breeze 및 FireBase 샘플을 참조하거나 ODataCollectionView 클래스에 대한 소스 코드를 확인하시길 바랍니다.

JSON 날짜

JSON은 데이터 직렬화에 적합한 형식이지만, 날짜를 지원하지 않습니다.

문제점

__JSON.stringify__를 사용하여 날짜 필드가 포함된 객체를 직렬화하면 날짜가 문자열로 변환됩니다. 그 후 __JSON.parse__를 사용하여 동일한 객체를 분석하면 날짜 필드는 문자열로 유지됩니다.

해결책

이 문제에 대한 해결책은 문자열을 검사하고 날짜처럼 보이는 문자열을 날짜 개체로 변환하는 JSON.parse에 대한 호출에서 'reviver' 함수를 사용하는 것입니다.

JSON 날짜 형식을 지정하는 방법의 예시는 JSON 날짜 로드 샘플을 확인하시길 바랍니다.