Backbone.js 데이터 동기화

Backbone.Model 객체는 서버와 데이터를 동기화하는 기능이 있습니다.

Backbone.Model 객체 동기화

객체를 동기화 하려면 자원의 기본 구조를 파악하고 urlRoot 속성과 idAttribute 속성을 부여해야 한다.

fetch() - 서버에서 데이터를 가져옵니다.

save() - 서버에 데이터를 저장합니다.

destroy() - 서버에서 데이터를 제거합니다.

예)

var Book = Backbone.Model.extend({

urlRoot: '/books',

idAttribute: '_id'

});

var book = new Book({_id: '1'});

book.fetch({    // Model.fetch()

success: function(){

alert(JSON.stringify(book.toJSON(), null, 2);

}

});

RESTful 웹 서비스는 데이터를 추가할 때 Collection 경로로 데이터 추가를 요청합니다.

따라서 Backbone.Model 객체는 POST 요청을 하는 기능이 없습니다.

Backbone.Collection 객체 동기화

Backbone.Collection 객체로 통신하면 Backbone.Model 객체에 urlRoot 속성을 입력하지 않아도 됩니다.

Backbone.Collection 객체에 url 속성을 입력합니다.

예)

var Book = Backbone.Model.extend({

idAttribute: '_id'

});

var Books = Backbone.Collection.extend({

url: '/books'

});

var books = new Books();

books.fetch({

success: function(){

}

})

fetch() - 서버에서 데이터를 가져옵니다.

create() - 서버에 데이터를 생성합니다.

Backbone.Collection.fetch() 메서드로 데이터를 불러오면 reset 이벤트를 실행합니다.

예)

var books = new Books()

books.bind('reset', function(){

// fetch() 실행 -> reset 이벤트 발생 -> 먼저 출력된다. (실행된다?)

});

books.fetch({

// reset 이벤트 발생시킨다 -> 이벤트 발생 후, 내용이 나중에 출력된다. (실행된다?)

})

예제 코드 구성)

// Template 구성

<script id="login-template" type="text/template">

</script>

<script id="register-template" type="text/template">

</template>

<script id="main-template" type="text/template">

</script>

<script id="item-template" type="text/template">

</script>

// Model 구성

var User = Backbone.Model.extend({ 

...

me: function (successFunc, errorFunc) {

$.ajax(this.urlRoot + '/me', {

type: 'GET',

success: function (a, b, c) { successFunc(a, b, c); },

error: function (a, b, c) { errorFunc(a, b, c); }

});

},

...

});

var ToDo = Backbone.Model.extend({ });

// Collection 구성

var ToDos = Backbone.Collection.extend({ });

// View 구성

var RegisterView = Backbone.View.extend({ });

var LoginView = Backbone.View.extend({

...

// 로그인

new User({

login: this.$('#login').val(),

            password: this.$('#password').val()

})

.login(

function () {                

this.undelegateEvents();

this.$el.removeData().unbind();

location.hash = 'main';

}.bind (this), /* login() 가 실행되는 new User() - [ this ] contenxt  */

/* on => object.on(event, callback, [ context ]) Alias: bind */

function () {

$('#login').val('');

$('#password').val('');

alert('로그인에 실패했습니다.');

}

);

// 기본 이벤트 제거

event.preventDefault();

...

});

var MainView = Backbone.View.extend({ });

var ItemView = Backbone.View.extend({ });

// Router 구성

var RootRouter = Backbone.Router.extend({ 

...

main: function () {

/* User.me() - function (successFunc, errorFunc) { }*/

new User().me(

function () {

new MainView();

}, 

function () {

location.hash = 'login';

}

);

}

...

});

// Application 시작

var router = new RootRouter();

Backbone.history.start();

location.hash = "main";