Backbone.js PushStates:Internet Explorer 的回退不起作用 [英] Backbone.js PushStates: Fallback for Internet Explorer not working

问题描述

我的网站刚刚在 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 路由器

//路由器var AppRouter = Backbone.Router.extend({路线:{'探索': '探索','探索/:id':'viewListing'，},探索:函数(){this.listingList = new ListingCollection();//这里有更多代码},viewListing:函数(listing_id){this.featuredListingId = listing_id;//在 this.explore() 中与 fetch() 一起发送this.探索();}});App = new AppRouter();//为兼容的浏览器启用 pushStatevar enablePushState = true;//禁用旧浏览器(IE8、IE9 等)var pushState = !!(enablePushState && window.history && window.history.pushState);如果(推状态){Backbone.history.start({推状态:真，根: '/'})} 别的 {Backbone.history.start({推状态:假，根: '/'})}

问题:正如您在上面的代码中看到的，如果浏览器不兼容，我尝试使用 pushState: false 禁用推送状态.

但是，要让 IE 访问通常适用于普通浏览器的内容 (http://mydomain.com/explore)，IE 将需要转到 http://mydomain.com/explore/#explore 这让事情变得混乱！进一步访问 http://mydomain.com/explore/1234 IE 需要转到 http://mydomain.com/explore/#explore/1234

应该如何解决这个问题?

解决方案

如果你不想要 http://mydomain.com/explore/#explore url，那么你必须重定向到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/"})

路线:{'': '探索'，':id': 'viewListing',}

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

What I am trying to achieve

Main URL: http://mydomain.com/explore

Another URL: 'http://mydomain.com/explore/1234

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

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

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

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

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

How should this be fixed?

解决方案

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: you'll probably have to remove the leading slash when setting path as a hash window.location.pathname.substr(1)

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屋！