rails turbolinks 實務小記
承接上篇文章,若對於 rails turoblinks 還不知道是什麼,可以參考此文:Rails Turbolinks & PJAX。這篇條列幾點在實作 rails turbolinks 時要注意的事項:
只有 <body> 的內容會被更動
Rails Turbolinks 目前版本只有 <body> 與 <title> 的內容會被更動,為什麼說「目前這個版本」?因為今年底前 turbolinks 第 3 版應就會隨著 rails 5 一起被 release,屆時將會有非常非常大的變動...可參考 turbolinks
不會有 progressbar 出現
目前 turbolinks 套用後的頁面切換是不會有一般瀏覽器的進度列,但在第 3 版後將可以手動開啟。
js/css 要放在 <head> 裡面
為了使 js/css 可以享受 turbolinks 的魔力,要把 js/css 放在 <head> 內,而非一般建議的放在頁面最下方
可以加上 async:true
即使放在 <head> 內也能使用 async:true 使網頁讀取不要因 js/css 而緩慢
<%= javascript_include_tag "application", async: true %>
解決 page:ready 問題
平常用 turbolinks 需要注意 js 的 $(document).ready(...) 是無法正常使用,而這個 gem 將解決這個問題,不用特別實作 page:change 的 event,這 gem 為 jquery.turbolinks.js
BTW, 此 gem 依舊有 $(document).on("ready", function(){...}) 的問題
tracking code 要放在 <body>
一些像是 google analytics, facebook pixel 等的 tracking code 要放在 <body> 內才能正常在頁面切換時被追蹤到。BTW, 新版將有「data-turbolinks-eval」可以做 js 要不要被執行的控制。
小結:好期待 turbolinks 3!
若想多了解,可看 upcase: https://upcase.com/videos/turbolinks