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();
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: '/'});
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 不要使用 # 來取代網址，這樣就沒問題了。