Backbone.js PushStates : Internet Explorer의 폴백이 작동하지 않습니다.

Question

내 사이트가 Backbone.js에서 푸시 스테이트를 구현했으며 IE의 전체 사이트가 중단됩니다. IE의 대체 버전을 어떻게 만들어야합니까?

내가

홈페이지 URL을 달성하기 위해 노력하고 무엇 : http://mydomain.com/explore

또 다른 URL : 'http://mydomain.com/explore/1234

사이트의 메인 페이지는 라우터 기능 explore을 트리거 http://mydomain.com/explore입니다.

때 사용자가 방문 http://mydomain.com/explore/1234 함수 explore와 동일하지만, 또한 항목 ID 1234 대한 세부 사항을 포함하는 함수 viewListing를 트리거의 백본 라우터.

Backbone.js 라우터

// Router 
var AppRouter = Backbone.Router.extend({ 
    routes: { 
     'explore': 'explore', 
     'explore/:id': 'viewListing', 
    }, 

    explore: function() { 
     this.listingList = new ListingCollection(); 
     // More code here 
    }, 

    viewListing: function(listing_id) { 
     this.featuredListingId = listing_id; // Sent along with fetch() in this.explore() 
     this.explore(); 
    } 
}); 

App = new AppRouter(); 

// Enable pushState for compatible browsers 
var enablePushState = true; 

// Disable for older browsers (IE8, IE9 etc) 
var pushState = !!(enablePushState && window.history && window.history.pushState); 

if(pushState) { 
    Backbone.history.start({ 
     pushState: true, 
     root: '/' 
    }) 
} else { 
    Backbone.history.start({ 
     pushState: false, 
     root: '/' 
    }) 
} 

문제점 : 위의 코드에서 볼 수 바와 같이, 나는 호환되지 않는 브라우저의 경우 pushState: false와 pushstates을 해제했습니다.

IE가 일반 브라우저 (http://mydomain.com/explore)에서 정상적으로 작동하는 항목에 액세스하는 경우 IE는 http://mydomain.com/explore/#explore으로 이동해야하므로 혼란 스럽습니다. 더 액세스하려면 http://mydomain.com/explore/1234 IE는 http://mydomain.com/explore/#explore/1234

으로 이동해야합니다. 어떻게 수정해야합니까?

Answer 1

http://mydomain.com/explore/#explore URL을 원하지 않는 경우 http://mydomain.com/#explore으로 리디렉션해야하므로 백본이 대신 시작됩니다.

if(!pushState && window.location.pathname != "/") { 
    window.location.replace("/#" + window.location.pathname) 
} 

UPD : 당신이 원하는 경우 /explore/ 당신의 백본 노선의 루트 다음을 제외해야 할 : 당신은 아마 해시로 window.location.pathname.substr(1)

UPD2을 경로를 설정할 때 슬래시를 제거해야합니다 루트에서와 History.start({root: "/explore/"})

routes: { 
    '': 'explore', 
    ':id': 'viewListing', 
}