데이터 로드

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

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

클라이언트에서 로딩

배열에 이미 데이터가 있는 경우 해당 배열을 생성자(constructor) 매개 변수로 사용하거나 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 배열을 response 값으로 설정하거나 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 호출에 매개 변수를 추가할 수 있습니다. 서버 API를 CollectionView를 확장하는 사용자 정의 클래스에 캡슐화할 수도 있습니다.

사용자 지정 서버 기반 CollectionView 클래스의 간단한 예를 보려면, ServerCollectionView 샘플을 확인하시기 바랍니다.

CRUD operation을 완벽하게 지원하는 예를 보려면 Breeze 및 FireBase 샘플을 참조하거나 ODataCollectionView 클래스의 소스 코드를 확인하시면 됩니다.

JSON Dates

JSON은 데이터를 직렬화하기 위한 훌륭한 형식이지만 안타깝게도 날짜를 지원하지 않습니다.

문제점

JSON.stringify를 사용하여 날짜 필드가 포함된 객체를 직렬화하면 날짜가 문자열로 변환됩니다. 그 다음 JSON.parse를 사용하여 동일한 객체를 파싱하면 날짜 필드는 문자열로 유지됩니다.

해결책

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

JSON 날짜 형식 지정 방법에 대한 예는 JSON 날짜 로드 샘플에사 참조하시기 바랍니다.