[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

데이터 로드

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


클라이언트 측

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


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

import * as wijmo from '@mescius/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를 캡슐화할 수도 있습니다.

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


JSON 날짜

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


문제점

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


해결책

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


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