라우팅 히스토리를 사용하기위한 Backbone.js 공통 부트 스트랩 패턴

Question

단일 페이지 웹 애플리케이션이 backbonejs로 작성되었습니다. 나는 다른 경로를 사용하며 각 경로는 컨트롤러에 해당합니다. myapp 루트 URL (myapp.com/) 또는 params (myapp.com/somelocation)가없는 루트가 아닌 URL을로드하면 제대로 작동합니다. 하지만 검색어 매개 변수 (예 : myapp.com/somelocation?z=search)를 사용하여 내 앱을 어느 위치로든로드하려고하면 문제가 발생합니다. 앱은 myapp.com/somelocation?z=search에 해당하는 정확한 컨트롤러와 myapp.com/somelocation에 해당하는 컨트롤러로 두 번 렌더링됩니다. 이 같은

경로 테이블의 모양을

routes: { 
     'login': 'login', 
     'home': 'home', 
     'timeline?*query': 'timelineWithQuery', 
     'timeline': 'timeline', 
     ... 
     '*path': 'defaultRoute' 
    }, ... 

컨트롤러는 다음과 같이이 :

// ... 
router.navigate(window.location, {trigger: true}); 
// ... 

것은 내가 전화하지 않는 경우 :

defaultRoute: function() { 
    router.navigate('home', {trigger: true});   
}, 

login: function(args) { 
    var controller = new App.PageController.Mobile.AuthPageController($('body')); 
    controller.executeLogin(args); 
}, 

timeline: function(args) { 
    var controller = new App.PageController.Mobile.TimelinePageController($('body')); 
    controller.executeTimeline(args); 
}, ... 

Document.ready 스크립트는 다음과 같습니다 router.navigate (window.location, {trigger : true}); 명시 적으로 아무도 내 응용 프로그램 시작 페이지를 렌더링하지 않습니다. 내가 myapp.com/timeline?foo=bar URL에서 시작하려고 시도 할 때까지 앱을 제대로 호출 할 때 호출됩니다. 그리고 이렇게하면 내 응용 프로그램은 두 번 렌더링됩니다 (페이지를 다시로드하지 않고).

제안 사항? 풍부한 라우팅 시나리오를 가진 백본 기반 단일 페이지 응용 프로그램을위한 일반적인 document.ready 부트 스트랩 패턴은 무엇입니까?

Answer 1

내비게이션에서는 location.pathname (푸시 스테이트 기준) 또는 location.hash을 사용하므로 location.queryString은 탐색 절차의 일부가 아닙니다. 나는이 행 : 'timeline?*query': 'timelineWithQuery',이 정규식으로 변환된다는 것을 잘 모르겠다. btw는 이 아닌 my/path에 매번 그 정규식을 실행할 것이기 때문에 중요하지 않다.

Backbone.history.start({pushState: true}) 앞에 모든 경로를 정의해야합니다. 전화를 걸면 현재 경로가 실행되므로 그 후에 수동으로 탐색을 호출 할 필요가 없습니다.