Backbone.js MV* 각 요소를 직접 개발해보고 전체 흐름에 대하여 알아보자
- initialize : 초기화 model new 생성시 자동 호출
- save : 서버로 전송
- fetch : 서버에서 가져오기
- sync : 강제로 서버와 값을 맞춤
- id : 속성을 통하여 전송 아이디 설정가능 (MongoDB 를 사용하면 "idAttribute: _id" 로 설정한다)
- defaults : model 객체의 기본값을 지정
- validate : 데이터 정합성 체크
- 테스트
+ index.html 준비 : jquery, underscore, backbone 순으로 최신버전을 다운로드 받아서 js 폴더 밑에 놓는다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/underscore.js" type="text/javascript"></script>
<script src="/js/backbone.js" type="text/javascript"></script>
<script src="/2.js" type="text/javascript"></script>
</body>
</html>
+ 2.js 백본 코딩
(function($) {
var UserModel = Backbone.Model.extend({
url: '/user',
defaults: {
name: '',
email: ''
}
});
var user = new UserModel();
var userDetails = { name: "dowon", email: "ysyun@yuwin.co.kr"};
user.save(userDetails, {
success: function(user) {
alert(user.toJSON());
},
error: function(user){
alert(user.toJSON());
}
});
var user1 = new UserModel({id: 1});
user1.fetch({
success: function(user) {
alert('fetch user name : ' + user.get('name'));
},
error: function(user){
alert(user.toJSON());
}
});
user1.sync();
})(jQuery);
+ fetch시에 맨밑의 user(빨간색)는 서버에서 가져온 정보가 없다 (404 code)
+ save 시의 Request URL 정보 : http://localhost:8080/user
- initialize : render 메소드 호출
- render : 화면 그리기
- events : 화면의 이벤트와 핸들러 등록
+ index.html 안에 템플릿 추가 : 위치가 중요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script type="text/template" id="search_template">
<label><%= name %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
<div id="search_container"></div>
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/underscore.js" type="text/javascript"></script>
<script src="/js/backbone.js" type="text/javascript"></script>
<script src="/2.js" type="text/javascript"></script>
</body>
</html>
+ 2.js 안에 View 추가
var SearchView = Backbone.View.extend({
initialize: function(){
this.render(); // 호출시 화면 그리기. initialize는 new 생성시 자동 호출됨
},
render: function(){
// 템플릿 과 데이터 결합
var template = _.template( $("#search_template").html(), {name: 'dowon'} );
this.$el.html( template );
},
events: {
"click input[type=button]": "doSearch" // 이벤트 핸들러 등록
},
doSearch: function( event ){
// Button clicked, you can access the element that was clicked with event.currentTarget
alert( "Search for " + $("#search_input").val() );
}
});
var search_view = new SearchView({ el: $("#search_container") });
+ 브라우져 호출
- routes : routing 경로와 처리 메소드 등록 (API 호출시 보여질 View 를 결정하여 준다)
+ 기존 호출 : http://localhost:8080 이고
+ routes설정이 다음과 같으면
routes: {
"foo/:bar" : "paramtest",
"*action" : "func"
},
+ http://localhost:8080/#/foo/dowon 호출하면 paramtest 메소드로 이동
http://localhost:8080/#/dowonaction 호출하면 func로 메소드로 이동
// sample example
var Router = Backbone.Router.extend({
routes: {
"foo/:bar" : "paramtest",
"*action" : "func"
},
func: function (action) {
console.log('action> ' + action);
},
paramtest:function (p) {
console.log('p> ' + p);
}
});
- Backbone.history.start() 호출 : SPA에서 Fragment (# 해쉬로 표현) 들에 대한 브라우져 호출의 히스토리를 관리한다
- 라우팅 과 Fragment의 관계를 반드시 이해하자
이미지 출처: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code
- Dynamic Routing
var AppRouter = Backbone.Router.extend({
// # 해쉬로 표현될 Fragment를 등록한다
routes: {
"posts/:id": "getPost",
"*actions": "defaultRoute" // Backbone will try match the route above first
}
});
// Instantiate the router
var app_router = new AppRouter;
app_router.on('route:getPost', function (id) {
// Note the variable in the route definition being passed in here
alert( "Get post number " + id );
});
app_router.on('route:defaultRoute', function (actions) {
alert( actions );
});
// Start Backbone history a necessary step for bookmarkable URL's
Backbone.history.start();
- 브라우져 호출 : <url>/spa-page/#/posts/1 호출
- model : 속성에 Model 클래스를 지정한다
- models : 컬렉션에 등록된 model 객체 배열열
- 2.js Model -> Collection 에 지정한다
var Song = Backbone.Model.extend({
initialize: function(){
console.log("Music is the answer");
}
});
var Album = Backbone.Collection.extend({
model: Song
});
var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });
var myAlbum = new Album([song1, song2, song3]);
console.log( myAlbum.models );
- 브라우져 호출
Backbone을 이용하게 되면 좀 더 쉽게 SPA 를 만들 수 있다. Backbone을 사용하여 개발하는 Workflow는 다음과 같다
- index.html 을 만든다 : SPA 에서는 오로지 <body> 태그는 index.html 에만 존재한다
- Backbone.Router를 개발한다 : RESTful 설계서에 따라 업무를 분류하면 될 것이다
- Backbone.View를 개발한다 : view에 맞는 template 파일을 별도로 가져가면 되겠다
- Backbone.Collection을 개발한다 : Model을 만들고 Collection을 개발한다
- RESTful Web Services & Open API : 설계에 따라서 Model에 url 을 설정하면 되겠다
이미지 출처 : 참조의 동영상중에서
Backbone의 서버연동 전체흐름도 : Real-time은 화면의 reload가 없이 진행된다. The 'net을 socket.io로 연결하는 것이 중요!
5. 총정리
- Model, View, Router 이해
+ Backbone Pattern에 따라 전체 디렉토리 구조 만들기
+ 시작, 업무클래스의 AMD 사용방법 소개
<참조>
- 원문1 : Hello World Backbone.js Tutorial
- $(this.el) 과 this.$el 의 차이점 : Backbone.View 의 render 메소드에서 사용함. this.$el 에서 에러 발생하면 최신버전 upgrade
'Backbone.js' 카테고리의 다른 글
| [Ember.js] 엠버 배우는 방법 (0) | 2013.03.30 |
|---|---|
| [Backbone.js] MarionetteJS 로 백본 확장하기 (0) | 2013.03.26 |
| [Backbone.js] 서점 샘플 응용하기 - 04 (Template 파일 별도로 만들기) (0) | 2013.03.20 |
| [Backbone.js] 서점 샘플 응용하기 - 03 (AMD 모듈화 하기) (0) | 2013.03.18 |
| [Backbone.js] RequireJS를 통한 브라우져상의 모듈화 (0) | 2013.03.16 |