[Script] Backbone.js Tutorial ( 기초 강좌 ) - Router

출처 :  http://backbonetutorials.com/what-is-a-router/ 

[Script] Backbone.js Tutorial ( 기초 강좌 ) - Router

[Script] Backbone.js Tutorial ( 기초강좌 ) - View

What is a Router

- hash tags(#) 를 사용하는 경우에 application 의 URL 을 routing( 다른 곳으로 연결 ) 해주는 역할.

- router 는 반드시 최소한 한 개 이상의 route 와 function 이 mapping 되어야 한다.

- routes 는 url 속에 # 이후의 모든 것을 해석한다. 모든 링크는 "#/action" 이나 "#action" 을 타게팅해야 한다. ( 전자처럼 사용하는 것이 조금 더 좋아 보인다 한다. )

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "*actions": "defaultRoute" // matches http://example.com/#anything-here
        },
        defaultRoute: function( actions ){
            // The variable passed in matches the variable in the route definition "actions"
            alert( actions ); 
        }
    });
    // Initiate the router
    var app_router = new AppRouter;
    // Start Backbone history a neccesary step for bookmarkable URL's
    Backbone.history.start();

</script>

[Activate route](#action)

[Activate another route](#/route/action)

_Notice the change in the url_

 - 참고로 예전버전에서는 Router 가 Controller의 이름으로 쓰였다.

Dynamic Routing

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "/posts/:id": "getPost",
            "*actions": "defaultRoute" // Backbone will try match the route above first
        },
        getPost: function( id ) {
            // Note the variable in the route definition being passed in here
            alert( "Get post number " + id );   
        },
        defaultRoute: function( actions ){
            alert( actions ); 
        }
    });
    // Instantiate the router
    var app_router = new AppRouter;
    // Start Backbone history a neccesary step for bookmarkable URL's
    Backbone.history.start();

</script>

[Post 120](#/posts/120)

[Post 130](#/posts/130)

_Notice the change in the url_

- :id 처럼 url 안에 :로 시작하는 녀석은 mapping 되는 function 에 parameter 로 들어가게 된다.

- *actions 를 사용할 경우는 모든 action 에 매핑되며, 이 경우에는 parameter 로 action 전체가 전달된다.

Dynamic Routing Const, ":params" and "*splats"

- :params 는 # 이후 / / 사이의 단일 component 가 argument 로 매핑된다.

- #/:route/:action URL 의 경우 function에 parameter 로 route 와 action 2개가 전달된다.

- * 는 # 이후 최종 남은 모든 내용이 argument 로 매핑된다.

  routes: {
        
            "/posts/:id": "getPost",
            // <a href="http://example.com/#/posts/121">Example</a>
            
            "/download/*path": "downloadFile",
            // <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
            
            "/:route/:action": "loadView",
            // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
            
        },
        
        getPost: function( id ){ 
            alert(id); // 121 
        },
        downloadFile: function( path ){ 
            alert(path); // user/images/hey.gif 
        },
        loadView: function( route, action ){ 
            alert(route + "_" + action); // dashboard_graph  

        } 

- Routes 는 매우 강력하지만, 한 앱에 너무 많이 가져서는 좋지 않다.
 

도움이 되셨다면 손가락 꾸욱~ ( 로그인 필요 x )