rails turbolinks 實務小記

27 Aug 2015 • 1 min read

承接上篇文章，若對於 rails turoblinks 還不知道是什麼，可以參考此文：Rails Turbolinks & PJAX。這篇條列幾點在實作 rails turbolinks 時要注意的事項：

Rails Turbolinks 目前版本只有 <body> 與 <title> 的內容會被更動，為什麼說「目前這個版本」？因為今年底前 turbolinks 第 3 版應就會隨著 rails 5 一起被 release，屆時將會有非常非常大的變動...可參考 turbolinks

目前 turbolinks 套用後的頁面切換是不會有一般瀏覽器的進度列，但在第 3 版後將可以手動開啟。

為了使 js/css 可以享受 turbolinks 的魔力，要把 js/css 放在 <head> 內，而非一般建議的放在頁面最下方

即使放在 <head> 內也能使用 async:true 使網頁讀取不要因 js/css 而緩慢

<%= javascript_include_tag "application", async: true %>

平常用 turbolinks 需要注意 js 的 $(document).ready(...) 是無法正常使用，而這個 gem 將解決這個問題，不用特別實作 page:change 的 event，這 gem 為 jquery.turbolinks.js

BTW, 此 gem 依舊有 $(document).on("ready", function(){...}) 的問題

一些像是 google analytics, facebook pixel 等的 tracking code 要放在 <body> 內才能正常在頁面切換時被追蹤到。BTW, 新版將有「data-turbolinks-eval」可以做 js 要不要被執行的控制。

hothero