Backbonejs - Collection으로 Model 그룹 활용

1. Collection에 Model 추가

import Backbone from 'backbone';

const FruitModel = Backbone.Model.extend({
    defaults: {
        id: '',
        name: '',
        price: ''
    }
});

const FruitCollection = Backbone.Collection.extend({
    model: FruitModel
}); // 컬렉션 생성

const fruitCollection = new FruitCollection(); // 객체 생성

fruitCollection.add({ id: 'mangoId', name: 'mango', price: 1000 }); // 모델 추가
fruitCollection.add({ id: 'orangeId', name: 'orange', price: 800 });
fruitCollection.add({ id: 'bananaId', name: 'banana', price: 500 });

fruitCollection.remove('bananaId'); // 모델 삭제

console.log(fruitCollection.toJSON()); // 컬렉션 목록 출력
/*
    [
        {"id": "mangoId", "name": "mango", "price": 1000},
        {"id": "orangeId", "name": "orange", "price": 800}
    ]
*/

• Backbone.Collection.extend : 컬렉션을 생성한다.
• model : 컬렉션의 모델 클래스를 입력한다.
• add : 컬렉션에 모델을 추가한다.
• remove : 컬렉션에서 모델을 제거한다.

Collection에 추가된 모델들은 get() 메서드를 활용해 id값에 따른 모델을 조회하거나 삭제가 가능하다. 모델을 추가할 때, id값을 추가하지않으면 Model의 defaults속성의 id값으로 id속성이 생성된다.

 

1-1. Collection의 id값으로 Model 조회

import Backbone from 'backbone';

const FruitModel = Backbone.Model.extend({
    defaults: {
        id: '',
        name: '',
        price: ''
    }
});

const FruitCollection = Backbone.Collection.extend({
    model: FruitModel
}); // 컬렉션 생성

const fruitCollection = new FruitCollection(); // 객체 생성

fruitCollection.add({ id: 'mangoId', name: 'mango', price: 1000 }); // 모델 추가
fruitCollection.add({ id: 'orangeId', name: 'orange', price: 800 });
fruitCollection.add({ id: 'bananaId', name: 'banana', price: 500 });

console.log(fruitCollection.get('mangoId').toJSON()); // {id: 'mangoId', name: 'mango', price: 1000}
console.log(fruitCollection.get('bananaId').toJSON()); // {id: 'bananaId', name: 'banana', price: 500}

get()에 id값을 입력하여 해당 모델을 조회할 수 있다.

 

1-2. Collection의 인덱스값으로 Model 조회

import Backbone from 'backbone';

const FruitModel = Backbone.Model.extend({
    defaults: {
        id: '',
        name: '',
        price: ''
    }
});

const FruitCollection = Backbone.Collection.extend({
    model: FruitModel
}); // 컬렉션 생성

const fruitCollection = new FruitCollection(); // 객체 생성

// 모델 추가
fruitCollection.add({ id: 'mangoId', name: 'mango', price: 1000 }); // 인덱스 0
fruitCollection.add({ id: 'orangeId', name: 'orange', price: 800 }); // 인덱스 1
fruitCollection.add({ id: 'bananaId', name: 'banana', price: 500 }); // 인덱스 2

console.log(fruitCollection.at(0).toJSON()); // {id: 'mangoId', name: 'mango', price: 1000}
console.log(fruitCollection.at(2).toJSON()); // {id: 'bananaId', name: 'banana', price: 500}

at() 메서드를 통해 인덱스값에 따른 모델을 조회할 수 있다. 인덱스값은 컬렉션에 추가된 순서에 따라 1씩 증가하여 부여된다.

 

2. Collection의 Model 수정

import Backbone from 'backbone';

const FruitModel = Backbone.Model.extend({
    defaults: {
        id: '',
        name: '',
        price: ''
    }
});

const FruitCollection = Backbone.Collection.extend({
    model: FruitModel
}); // 컬렉션 생성

const fruitCollection = new FruitCollection(); // 객체 생성

// 모델 추가
fruitCollection.add({ id: 'mangoId', name: 'mango', price: 1000 });
console.log(fruitCollection.get('mangoId').toJSON()); // {id: 'mangoId', name: 'mango', price: 1000}

// 모델 수정
fruitCollection.add({ id: 'mangoId', name: 'mango nyam', price: 2000 }, { merge: true });
console.log(fruitCollection.get('mangoId').toJSON()); // {id: 'mangoId', name: 'mango nyam', price: 2000}

 

• merge: true : id값과 일치하는 모델의 속성값을 변경한다.

두번째 파라미터에 merge: true를 추가하면 id값과 일치하는 컬렉션의 모델을 찾아 해당 모델의 속성값을 변경시킨다.

 

3. Collection 초기화

import Backbone from 'backbone';

const FruitModel = Backbone.Model.extend({
    defaults: {
        id: '',
        name: '',
        price: ''
    }
});

const FruitCollection = Backbone.Collection.extend({
    model: FruitModel
}); // 컬렉션 생성

const fruitCollection = new FruitCollection(); // 객체 생성

// 모델 추가
fruitCollection.add({ id: 'mangoId', name: 'mango', price: 1000 });

// 컬렉션 초기화
fruitCollection.reset();
console.log(fruitCollection.toJSON()); // []

• reset() : 컬렉션에 추가되어있는 모델을 제거한다. reset()한 후, 컬렉션을 출력하면 빈 배열이 출력되는 것을 확인할 수 있다.

3-1. Collection 전체 변경

import Backbone from 'backbone';

const FruitModel = Backbone.Model.extend({
    defaults: {
        id: '',
        name: '',
        price: ''
    }
});

const FruitCollection = Backbone.Collection.extend({
    model: FruitModel
}); // 컬렉션 생성

const fruitCollection = new FruitCollection(); // 객체 생성

// 전체 변경
fruitCollection.reset([
    { id: 'mangoId', name: 'mango', price: 1000 },
    { id: 'orangeId', name: 'orange', price: 500},
    { id: 'bananaId', name: 'banana', price: 300}
]);

reset()안에 추가할 모델들을 나열하면 컬렉션을 초기화한 후, 해당 속성들로 컬렉션을 다시 채워넣는다.

---

참고 사이트 : 

https://backbonejs.org/#Collection

Backbone.js

 

https://devdocs.io/backbone/index#Collection-constructor

DevDocs

 

https://www.sitepoint.com/backbone-basics-models-views-collections-templates/

Backbone.js Basics: Models, Views, Collections and Templates — SitePoint

 

https://phsun102.tistory.com/135

Backbonejs - 요소의 정의 및 설치