URL을 관리하는 객체
- 모델에서 이벤트가 발생하면 뷰를 변경하는 역할
- 뷰에서 이벤트가 발생하면 모델을 변경하는 역할
- 모든 잡다한 처리를 수행하는 역할
정적 라우트 - 고정된 경로로 라우트합니다.
http://www.h5homom.com/theme
http://www.h5homom.com/category
예)
var router = new Backbone.Router({
routes:{
'': 'onNothing',
'blue':'onBlue'
}
});
router.bind('route:onNothing', function(){ });
router.bind('route:onBlue', function(){ });
// Backbone.Router 객체에 routes 속성이 없으면 Backbone.history.start() 메서드를 사용할 수 없음
동적 라우트- 고정되지 않은 경로로 라우트 합니다.
동적 라우트는 URL의 일부를 변경될 수 있는 값으로 설정하는 기능입니다.
http://www.h5homom.com/:사용자/:파일
http://www.h5homom.com/entry/jk/:아이디
예)
var router = new Backbone.Router({
routes:{
'color/:background': 'onColor',
'title/:first-:second':'onTitle'
}
});
router.bind('route:onColor', function(background){
$('body').css('background', background);
});
router.bind('route:onTitle', function(first, second){
$('#title').text(first + "+" + second);
});
<h1>Router <span id="title">0 +0 </span></h1>
<a href="#color/white" class="btn">White</a>
<a href="#color/blue" class="btn">Blue</a>
<a href="#title/0-0" class="btn">00</a>
<a href="#title/0-1" class="btn">01</a>
상속
var Router = new Backbone.Router.extend({
routes:{
'': 'onNothing',
'red': 'onRed',
'blue':'onBlue'
},
onRed: function(){
},
onBlue: function(){
}
});
var router = new Router();
Backbone.history.start();
'Backbone.js' 카테고리의 다른 글
Backbone.js 데이터 동기화 (0) | 2014.09.03 |
---|---|
Backbone.View - 선택/ 제거 (0) | 2014.09.03 |
Backbone.View - 템플릿/ 이벤트 (0) | 2014.09.02 |
Backbone.View - 상속 (0) | 2014.09.02 |
Backbone.Collection (0) | 2014.09.02 |