Backbone.js PushStates: Dự phòng Internet Explorer không hoạt động

Question

Trang web của tôi vừa triển khai pushstates trong Backbone.js và toàn bộ trang web bị ngắt đối với IE. Tôi nên tạo một dự phòng cho IE như thế nào?

Những gì tôi đang cố gắng để đạt

URL chính: http://mydomain.com/explore

Một URL: 'http://mydomain.com/explore/1234

Các trang chính của trang web này là http://mydomain.com/explore mà gây nên các chức năng định tuyến explore.

Khi người dùng truy cập http://mydomain.com/explore/1234, bộ định tuyến của Backbone sẽ kích hoạt chức năng viewListing, giống như chức năng explore, nhưng cũng bao gồm chi tiết cho id mục 1234.

Backbone.js Router

// 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: '/' 
    }) 
} 

Vấn đề: Như bạn có thể thấy trong đoạn mã trên, tôi đã cố gắng để vô hiệu hóa pushstates với pushState: false nếu nó là một trình duyệt không tương thích.

Tuy nhiên, để IE truy cập vào những gì bình thường sẽ hoạt động đối với trình duyệt thông thường (http://mydomain.com/explore), IE sẽ cần phải truy cập http://mydomain.com/explore/#explore, điều này khiến mọi thứ trở nên khó hiểu! Hơn nữa để truy cập http://mydomain.com/explore/1234 IE cần phải truy cập http://mydomain.com/explore/#explore/1234

Điều này nên được khắc phục như thế nào?

Answer 1

Nếu bạn không muốn có địa chỉ http://mydomain.com/explore/#explore, thì bạn phải chuyển hướng đến http://mydomain.com/#explore vì vậy xương sống sẽ bắt đầu bằng cách thay thế.

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

UPD: có thể bạn sẽ phải loại bỏ các dấu gạch chéo hàng đầu khi thiết con đường như một băm window.location.pathname.substr(1)

UPD2: nếu bạn muốn /explore/ là gốc rễ cho các tuyến đường xương sống của bạn thì bạn phải loại trừ nó từ các tuyến đường và được đặt làm thư mục gốc trong History.start({root: "/explore/"})

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