Backbone.js的PushStates：后备的Internet Explorer无法正常工作 [英] Backbone.js PushStates: Fallback for Internet Explorer not working

问题描述

我的网站刚刚实施pushstates在Backbone.js的和整个网站打破了IE浏览器。我应该如何创建一个备用的IE？

My site has just implemented pushstates in Backbone.js and the entire site breaks for IE. How should I create a fallback for IE?

我想实现

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

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

该网站的主要页面 http://mydomain.com/explore 这会触发路由器功能探索。

The main page of the site is http://mydomain.com/explore which triggers the router function explore.

当用户访问 http://mydomain.com/explore/1234 ，骨干路由器将触发功能 viewListing ，这是相同的功能探索，也包括项目ID 1234 。

When a user visits http://mydomain.com/explore/1234, Backbone's router will trigger the function viewListing, which is the same as function explore, but also includes details for item 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: '/'
    })
}

问题：正如你可以在上面code看到，我试图禁用与 pushState的pushstates：假如果它是一个不兼容的浏览器。

Problem: As you can see in the above code, I tried to disable pushstates with pushState: false if it is an incompatible browser.

不过，对于IE浏览器访问什么通常一个正常的浏览器（ http://mydomain.com/explore ）的工作，IE浏览器将需要到 http://mydomain.com/explore/#explore 这使事情变得扑朔迷离！进一步访问 http://mydomain.com/explore/1234 IE需要去 http://mydomain.com/explore/#探索/ 1234

However for IE to access what would normally work for a normal browser (http://mydomain.com/explore), IE will need to go to http://mydomain.com/explore/#explore which is making things confusing! Further more to access http://mydomain.com/explore/1234 IE needs to go to http://mydomain.com/explore/#explore/1234

应如何修复？

推荐答案

如果你不想 http://mydomain.com/explore/#explore 网​​址，那么你必须重定向到
http://mydomain.com/#explore 所以骨干将开始使用它来代替。

If you don't want http://mydomain.com/explore/#explore url, then you have to redirect to http://mydomain.com/#explore so Backbone will start with it instead.

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

UPD：你可能不得不设置路径作为哈希时删除前导斜线 window.location.pathname.substr（1）

UPD2：如果你想要 /浏览/ 来为您的骨干线路的根，那么你必须从路线排除在<$ C $设置为根C> History.start（{根：/探索/}）

UPD2: if you want /explore/ to be the root for your backbone routes then you have to exclude it from routes and set as a root in History.start({root: "/explore/"})

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

这篇关于Backbone.js的PushStates：后备的Internet Explorer无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！