為Backbone做一個pretty Urls

之前有使用過backbone開發一個網站
但是始終碰到一個問題
就是url一定要加一個hash symbol
使得url很醜並且也不利於seo
最近剛好有些時間，稍微研究一下
網路上剛好有一篇文章
照著操作已經可以解決大部分的問題
最後再加上加入一些nginx的設定
總於完全解決問題了～

以下是操作步驟：
SETP 1:
根據官方文件
加入以下參數

  Backbone.history.start({ pushState: true })  

接下來根據文章
要處理的就剩下內部連接跟外部連結

SETP 2:
處理內部連結，先將所有連結的domain去掉改成/
接下來加上一段jquery

  $(document).on("click", "a[href^='/']", function(event) { 
      var href, passThrough, url; 
      href = $(event.currentTarget).attr('href'); 
      passThrough = href.indexOf('sign_out') >= 0; 
      if (!passThrough && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) { 
          event.preventDefault(); 
          url = href.replace(/^\//, '').replace('\#\!\/', ''); 
          window.Router.__super__.navigate(url, { trigger: true }); 
          return false; 
      } 
  });   

簡單的解釋一下
目的就是要監聽所有click event
將href裡的開頭的/和#!清掉
最後用backebone navigate作導頁

SETP 3:
處理外部鏈結
加入以下code

   window.App = { 
       Models: {}, Collections: {}, Views: {}, 
       redirectHashBang: function() { 
           return window.location = window.location.hash.substring(2); } 
       }; 

   $(function() { 
       if (window.location.hash.indexOf('!') > -1) { 
           return App.redirectHashBang(); 
       } 
   });  

目的是要引許#!的存在
會導到相對應的頁面

SETP 4:
文章下面還server端的設定
在此就不多加敘述
但是至此為止還是會有從外部直接進來的問題
這就必須動到web server 本例子是用nginx
設定方式很簡單，只要加上

  location /你的route path { 
      proxy_pass http://yourdomain.com.tw/#!; 
  }  

就可以輕易幫你做到了 希望對有碰到相同問題的人有幫助～