CollectionView

Wijmo는 강력하고 친숙한 데이터 레이어를 기반으로 하는 견고한 인프라를 갖추고 있습니다.

기본 데이터 바인딩 인터페이스는 ICollectionView 이지만, Wijmo는 편집 및 페이징 지원을 위한 IEditableCollectionViewIPagedCollectionView 인터페이스도 포함되어 추가 개발 없이도 Wijmo를 통해 데이터를 컨트롤 할 수 있습니다.


ICollectionView


Wijmo의 ICollectionView 인터페이스는 Microsoft의 XAML 플랫폼에서 사용되는 ICollectionView 인터페이스 의 JavaScript 버전입니다.

.NET의 핵심 기능인 ICollectionView와 거의 동일한 기능을 제공하고 있습니다. 이를 통해, 위즈모에서는 데이터를 UI 요소에 바인딩하는 일관되고 강력하며 MVVM 친화적인 방법을 제공합니다.

또한 이를 바탕으로 기본적으로 통화, 필터링, 그룹화 및 정렬 서비스를 제공합니다.

IEditableCollectionViewIPagedCollectionView 인터페이스는 지원 편집과 페이징을 지원합니다.

Wijmo에는 ICollectionView 를 구현하는 여러 클래스가 포함되어 있습니다 .

가장 기본적인 것은 데이터 소스로 일반 JavaScript 배열을 사용하는 CollectionView 입니다.

또한, BreezeJS 및 OData를 데이터 소스로 사용하는 구현도 있습니다.


CollectionView 클래스


CollectionvView 클래스는 ICollectionView에의 인터페이스에서 파생되었습니다. Wijmo가 제공하는 모든 UI 컨트롤에서 데이터를 매우 쉽게 관리 할 수 있는 기능 세트를 제공합니다. 컨트롤에 바인딩 되면 CollectionView 에 대한 변경 사항 이 컨트롤에 자동으로 반영됩니다. CollectionView를 사용하는 방법을 보려면 다음 항목으로 건너 뛰십시오.


관찰 가능한 배열


ObservableArray 클래스는 Wijmo에서 사용할 수 있는 인기 있는 데이터 관리 클래스 중에 하나입니다. ObservableArray를 사용하는 것은 일반 자바 스크립트 배열을 사용하는 것과 매우 유사합니다. 삽입 , 제거 , 정렬교체(splice) 과 같은 유사한 기능이 있습니다 .


collectionChanged 이벤트

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

  • push
  • pop
  • splice
  • insert
  • remove

이벤트를 사용하려면 핸들러를 추가하고 이벤트 발생 시, 동작을 정의하는 인수로 핸들러에 함수를 제공하십시오.

아래 예제는 이벤트에 핸들러를 추가하는 방법을 보여 줍니다.

Example
import * as wijmo from '@grapecity/wijmo';
let observableArray = new wijmo.ObservableArray();
observableArray.collectionChanged.addHandler( (host, event) => {
console.log('collectionChanged');
});

값을 배열 구성원 또는 배열 길이에 직접 할당하여 변경하면 collectionChanged 이벤트 가 발생하지 않습니다.