백본 마리오네트 라우팅 문제

Question

내 백본에서 라우팅을 설정하려고합니다. 마리오넷 응용 프로그램과 백본을 처음 사용합니다.

내가 내 HTML에서

var firstProject= new Marionette.Application(); 

firstProject.addRegions({ 
    main : 'main', 
}); 

//my router 
var MyRouter = Backbone.Marionette.AppRouter.extend({ 
    // "someMethod" must exist at controller.someMethod 
    appRoutes: { 
    "first" : "someOtherMethod" 
    }, 

    /* standard routes can be mixed with appRoutes/Controllers above */ 
    routes : { 
    "second" : "someOtherMethod" 
    }, 
    someOtherMethod : function(){ 
     alert('hi') 
    } 
}); 


firstProject.on('initialize:after', function(){ 
    if(Backbone.history){ 
     Backbone.history.start(); 

    } 
}); 

같은 JS를 가지고, 나는

<a href="#/first" class="btn btn-primary btn-lg" role="button">First product</a> 
<a href="#/second" class="btn btn-primary btn-lg" role="button">First product</a> 

은 내가 링크를 클릭 할 때 처음 HTML 페이지와 두 번째 HTML 페이지를로드하는 내 페이지를 탐색 할 수 있습니다. 나는 문서를 읽었지만 어떻게 든 복잡하다. 누군가 나에게 이것에 대한 힌트를 줄 수 있습니까? 고마워요!

Answer 1

앱 라우팅의 가장 간단한 형태는 다음과 같이 AppRouter의 속성 '경로'를 사용하는 것입니다.

var firstProject= new Marionette.Application(); 

firstProject.addRegions({ 
    main : 'main', 
}); 

//my router 
var MyRouter = Backbone.Marionette.AppRouter.extend({ 

    /* standard routes can be mixed with appRoutes/Controllers above */ 
    routes : { 
    "second" : "secondMethodFromThisObject", 
    "first" : "firstMethodFromThisObject" 
    }, 
    firstMethodFromThisObject : function(){ 
     alert('hi'); 
    }, 
    secondMethodFromThisObject : function(){ 
     alert('hi'); 
    } 
}); 


firstProject.on('initialize:after', function(){ 
    if(Backbone.history){ 
     Backbone.history.start(); 
    } 
}); 

appRoutes 속성을 사용하려는 경우 일반적으로 응용 프로그램이 더 큰 경우처럼 사용합니다. 당신은 다음과 같이 더 나을 것입니다.

var firstProject= new Marionette.Application(); 

firstProject.addRegions({ 
    main : 'main', 
}); 

//my router 
var MyRouter = Backbone.Marionette.AppRouter.extend({ 

    /* standard routes can be mixed with appRoutes/Controllers above */ 
    appRoutes : { 
    "first" : "firstMethodFromController", 
    "second" : "secondMethodFromController" 
    } 
}); 

var MyController = Marionette.Controller.extend({ 
    "secondMethodFromController": function() { 
     alert('Hi from inside the controller'); 
    }, 
    "firstMethodFromController": function() { 
     alert('Hi from inside the controller'); 
    } 
}); 

firstProject.addInitializer(function() { 
    // initialize routes with controller 
    new MyRouter({ controller: new MyController }); 
}); 

firstProject.on('initialize:after', function(){ 
    if(Backbone.history){ 
     Backbone.history.start(); 
    } 
});