【Ember.js】使用History.js讓瀏覽器支援history API

簡介：

Ember.js的Router提供了不同的Location API，history API是其中之一

使用它的好處為網址中沒有 /#/ ，除了能把路徑傳至伺服器作預先處理，
亦可以被搜尋引擎索引，實例可參考 Discourse 或 Ember.js Forum

使用history API時的問題：

但由於很多用戶使用舊的瀏覽器，例如 IE 6 - IE 9等，
為了確保他們能正常使用，所以需要使用polyfill - History.js

專案網站：https://github.com/browserstate/history.js/
直接下載：native.history.js

建立自定的Location API：

這裡我只顯示出已修改的部分，基本上是跟據History.js與原生的差異作改動

Ember.HistoryJsLocation = Ember.Object.extend({
  initState: function() {
    set(this, 'history', get(this, 'history') || window.History);
  },
  getState: function() {
    return get(this, 'history').getState().data;
  },
});
Ember.Location.registerImplementation('historyJs', Ember.HistoryJsLocation);

下載：https://gist.github.com/inDream/5796367

使用方法：

加入 native.history.js 和 Ember.HistoryJsLocation.js 到頁面，
然後在定義Router前加入以下的代碼

App.Router.reopen({
  location: 'historyJs'
});

延伸閱讀：
http://diveintohtml5.info/history.html - 詳細的History API介紹
http://brooky.cc/2011/06/27/start-using-html5-history-api-today/ - 介紹History API的實例
http://caniuse.com/#feat=history - 查看原生支援History API的瀏覽器