Collection View

콜렉션 뷰(CollectionView) 는 목록 데이타(콜렉션)를 표현하기 위한 기능을 제공합니다. CollectionView는 전체 콜렉션을 관장하며 콜렉션 내 각각의 아이템은 ItemView 가 처리합니다. CollectionView 와 ItemView 의 결합은 필수적이며 CollectionView 의 뷰 구성 객체에 rowView에 ItemView를 지정하고 ItemView 는 rowContainer 하위 요소로 추가 됩니다.

basic-collection-view.hbs

<div>
    <h1>Collection</h1>
    <ul id="basic-container">
    </ul>
</div>

basic-collection-view.js

import Woowahan from 'woowahan';
import BasicItemView from './basic-item-view';
import template from './basic-collection-view.hbs';

export default Woowahan.CollectionView.create('BasicCollectionView', {
  template,

  rowView: BasicItemView,
  rowContainer: '#basic-container',

  viewDidMount() {
    const collectionData = [
      { name: '홍길동', age: 573 },
      { name: '이순신', age: 534 },
    ];

    this.reload(collectionData);
  }
});

basic-item-view.hbs

<li>{{name}} - {{age}}세</li>

basic-item-view.js

import Woowahan from 'woowahan';
import template from './basic-item-view.hbs';

export default Woowahan.ItemView.create('BasicItemView', {
  template
});

rowContainer

콜렉션 데이터의 뷰를 추가할 컨테이너의 셀렉터를 지정합니다.

rowView

콜렉션 데이터를 뷰 모델로 가지는 ItemView 입니다.

reload

ItemView를 생성(or 업데이트) 합니다. 첫 번째 인자는 콜렉션입니다. 두 번째 옵션은 ItemView 생성 방식을 지정할 수 있는 옵션 객체이며 다음과 같은 옵션을 제공합니다.

• uid: 아이템 Primary 키 필드를 지정합니다.
• reset: 기존 아이템이 있다면 삭제하고 다시 생성할지에 대한 옵션이며 기본 값은 true 입니다. false인 경우 uid 값을 기준으로 동일 값을 판별합니다.
• reverse: ItemView를 배열 순서대로 추가할 것인지(false) 역순으로 추가할 지에 대한 옵션입니다. 기본값은 false

this.reload(collectionData, {
  uid: 'name',
  reset: true,
  reverse: false,
});

getCollection

콜렉션 뷰의 콜렉션 데이타를 JSON 오브젝트로 반환합니다.