'Router'에 해당되는 글 1건

  1. 2014.09.03 Backbone.Router - 라우트/ 상속

Backbone.Router - 라우트/ 상속

Posted by 단순대왕 Backbone.js : 2014. 9. 3. 16:08

Backbone.Router

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() 메서드를 사용할 수 없음

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
  
 «이전 1  다음»