Backbone Routing pushState in IE

backbone
Backbone.js 幫忙處理掉所有瀏覽器

Html5 History pushState 功能,除了 IE 9 以下(含 IE 9)不支援 history.pushState()history.replaceState(),其他 Browser 幾乎都支援了,在 Backbone.js 如何處理 URL 變化呢?以往透過 handle URL hash 來決定網頁要處理哪些資料,這也是 Backbone 預設的處理方式,範例如下 URL:

http://xxx/#!/user/list http://xxx/#!/user/add

Backbone.Router.extend({
  routes: {
    "!/user/:action": "user"
  },
  initialize: function() {

  },
  user: function(action, id) {
    
  }
});
Backbone.history.start();
上面方法是通解,在各種瀏覽器包含 IE 都適用,那如果是使用 history.pushState 請改成底下: URL:

http://xxx/user/list http://xxx/user/add

Backbone.Router.extend({
routes: {
“/user/:action”: “user”
},
initialize: function() {

}, user: function(action, id) {

} }) Backbone.history.start({pushState: true, root: ‘/'}); 此作法在支援 html pushState 時候是可以按照您定義的 url 運作,但是在 IE 9 版本,網址就會被改成 URL:

http://xxx/#/user/list http://xxx/#/user/add 一樣會被加上 hash 值,該如何解決此問題呢,請把 Backbone.history.start 改成

Backbone.history.start({pushState: true, hashChange: false, root: '/'});
設定

hashChange property 為 false,讓 IE 9 不要使用 # 來取代網址,這樣就沒問題了。


See also