개발일기

Backbonejs - Collection으로 Model 그룹 활용 본문

Javascript/Backbone.js

Backbonejs - Collection으로 Model 그룹 활용

Flashback 2023. 1. 21. 15:28
728x90
반응형

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

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTfu

backbonejs.org

 

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

 

DevDocs

 

devdocs.io

 

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

 

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

Nick Salloum reacquaints you with Backbone.js, demonstrating the key concepts and paving the way to building a scalable application with a sane code base.

www.sitepoint.com

 

https://phsun102.tistory.com/135

 

Backbonejs - 요소의 정의 및 설치

1. Backbone.js 란? Backbone.js는 자바스크립트의 클라이언트 측 코드에서 SPA를 원활하게 개발할 수 있는 MV* 패턴의 프레임워크이자 자바스크립트 라이브러리다. Backbone.js는 컨트롤러가 없기에 MVC패턴

phsun102.tistory.com

 

728x90
반응형
Comments