Backbone.js Collection

2017-02-23

2024-06-07

backbone

Backbone Collection

Model의 집합. View와 연결되어, Model에 변화가 생길 때 손쉽게 View(UI)를 갱신할 수 있다.

//모델 선언
var Book = Backbone.Model.extend({
    //모델 생성시의 초기값 설정
    defaults: {
        //id: 1, <=모델 생성 초기값에 id속성을 넣으면 Create명령 대신, Update명령을 실행하니 주의할것!
        title: 'untitled',
        category: 'none'
    },
    urlRoot: '/books',
    idAttribute: 'id'
});

var book1 = new Book({title: 'javascript', category: '개발'}); //모델 생성
var book2 = new Book({title: 'photoshop', category: '디자인'});  //모델 생성

//컬렉션 선언
var Books = Backbone.Collection.extend({
    model: Book,
    url: '/books',
    //초기화
    initialize: function(){
        this.on('add', function(model, collection){
            console.log('컬렉션의 add이벤트 핸들러 반응함');
        });

        this.on('remove', function(model, collection){
            console.log('컬렉션의 remove이벤트 핸들러 반응함');
        });

        //모델 내부 name프로퍼티의 change이벤트핸들러
        this.on('change:title', function(model, value){
            console.log('컬렉션의 change이벤트 핸들러 반응함');
        });
    }
});

//컬렉션 생성
var books = new Books();

books.add([book1, book2]); //컬렉션에 배열로 push 한다.

FrontendSPABackbone.js

Backbone.js Collection

Backbone Collection

참조