Wijmo Data

Wijmo는 강력하고 친숙한 데이터 계층을 기반으로 한 견고한 인프라를 갖추고 있습니다. 기본 데이터 바인딩 인터페이스는 ICollectionView이지만, Wijmo에는 편집 및 페이징을 지원하는 IEditableCollectionView 및 IPagedCollectionView 인터페이스도 포함되어 있습니다.

ICollectionView

Wijmo의 ICollectionView 인터페이스는 Microsoft의 XAML 플랫폼에서 사용되는 ICollectionView 인터페이스의 JavaScript 버전입니다. NET에 있는 것과 거의 동일합니다. 데이터를 UI 요소에 바인딩할 수 있는 일관되고 강력하며 MVVM-사용하기 편한 방법을 제공합니다. 또한 통화, 필터링, 그룹화, 정렬 서비스도 제공합니다.

IEditableCollectionView 및 IPagedCollectionView 인터페이스는 편집 및 페이징을 지원합니다.

Wijmo에는 ICollectionView를 구현하는 여러 클래스가 포함되어 있습니다. 가장 기본적인 CollectionView는 일반 JavaScript 배열을 데이터 소스로 사용합니다. BreezeJS 및 OData가 데이터 소스로 사용되는 구현도 있습니다.

CollectionView 클래스

CollectionvView 클래스는 ICollectionView 인터페이스에서 파생되었습니다. Wijmo가 제공하는 모든 UI 컨트롤에서 데이터를 매우 쉽게 관리할 수 있는 일련의 기능이 있습니다. 컨트롤에 바인딩되면, CollectionView의 변경 내용이 컨트롤에 자동으로 반영됩니다. 다음 주제에서 CollectionView를 사용하는 방법을 확인하실 수 있습니다.

Observable Array

ObservableArray 클래스도 Wijmo에서 사용할 수 있는 인기 있는 데이터 관리 클래스 입니다. ObservableArray를 사용하는 것은 일반 Javascript 배열을 사용하는 것과 매우 유사합니다. insert, remove, sort ,splice 같은 유사한 함수를 가지고 있습니다.

collectionChanged event

ObservableArray 클래스는 컬렉션에서 항목이 변경될 때 collectionChanged 이벤트를 발생시킵니다. 이벤트는 다음 메서드를 사용할 때 실행됩니다:

• push
• pop
• splice
• insert
• remove

이벤트를 사용하려면, 핸들러를 추가하고 핸들러에 함수를 인수로 제공하여 이벤트가 발생할 때의 동작을 규정합니다. 아래 예에서 이벤트에 핸들러를 추가하는 방법을 알 수 있습니다.

예시

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

let observableArray = new wijmo.ObservableArray();

observableArray.collectionChanged.addHandler( (host, event) => {
    console.log('collectionChanged');
});

배열 멤버나 배열 길이에 직접 값을 할당하여 변경한 사항은 collectionChanged 이벤트를 발생시키지 않습니다.