Backbone.js PushStates:Internet Explorer的后备无法正常工作

Question

我的网站刚刚在Backbone.js中实现了pushstates,并且IE的整个站点都已中断.我应该如何为IE创建一个后备？

我想要实现的目标

主要网址: http://mydomain.com/explore

另一个网址: 'http://mydomain.com/explore/1234

该站点的主页面http://mydomain.com/explore触发了路由器功能explore.

当用户访问时http://mydomain.com/explore/1234,Backbone的路由器将触发该功能viewListing,该功能与功能相同explore,但也包括项目ID的详细信息1234.

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/1234IE需要去http://mydomain.com/explore/#explore/1234

该如何修复？

Answer 1

如果您不需要http://mydomain.com/explore/#exploreurl，那么您必须重定向到， http://mydomain.com/#explore以便 Backbone 将从它开始。

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

UPD：将路径设置为散列时，您可能需要删除前导斜杠window.location.pathname.substr(1)

UPD2：如果您想/explore/成为主干路由的根，那么您必须将其从路由中排除并设置为根History.start({root: "/explore/"})

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