2013年9月29日 星期日

[ROR] Turbolink, ajax, jQuery, coffeescript, Asset Pipeline

X  …. 怎麼那一次混雜那麼多東西orz
緣由:
想在ROR 4上面寫ajax
我先依照的教學寫了一下,
http://ihower.tw/rails3/assets-and-ajax.html
不過他是for ROR 3.x
所以惡夢就開始了...


因為我的 javascript 不夠好
又混上了 jQuery + coffeescript 就差點暈倒 XD
(不過換個角度想,反正都沒學過,反正對我來說都是新語言)

原來 一個 coffeescript 的檔案,會將變數都納為區域變數
所以,寫好了會無法直接背 html 拿來使用
因此.... 一開始我就還是想像shower 用 jQuery + ready + function_assgin 在head 中把function 指定到一個動作上

但是......
我萬萬沒想到 ROR4 有預設將 Turbolink 打開
簡單來說 Turbolink 就是假設換頁時,head 沒有變動,就不會重新載入head,只載入body的部份
然後又有一個東西叫做assets pipeline,就是server會把js 都打包成一包

所以就發現,
首先先載入頁面a
因為 assets pipeline的關係
原本寫改頁面b的script也已經載入了,(但是由於找不到指定id,所以也就不會正確的指定動作)
接著,我從頁面a 連結到頁面b時,
因為head 沒有改變,
所以頁面b就不會重新load script的部份
因此,原本寫改頁面b的script也就不會執行id指定動作的動作
所以因此當操作頁面時,動作就看起來沒有反應,因為根本沒有指定呀!
(如果在頁面b reload,因為script會重新下載重跑,因此原來想要的動作就會執行,也就會正確的指定動作)

卡了兩天
直到我用對關鍵字data-turbolinks-track ,看了那個大陸牛的blog
我才恍然大悟

所以我現在就想說,還是想要保留turbolink的特性
所以將function還是寫在 assets pipeline 指定的資料夾內
由於使用的是 coffeescript
所以用全域變數將他接出來

然後在  view裡
相關的物件寫上
 {:onchange => 'xxxxxxxx()'}
之類的,做動作連結

應該就ok了吧!

ref:
大陸牛:關於 turbolink的概念與問題
http://blog.chloerei.com/articles/834b424d-talk-about-pjax-turbolink-and-basecamp

大陸牛:關於assets pipeline 的觀念
http://blog.chloerei.com/articles/cdb625cd-rails-assets-pipeline-s-value

http://guides.rubyonrails.org/asset_pipeline.html
assets pipeline 處理的方式
http://railsapps.github.io/rails-javascript-include-external.html

coffeescript 的全域變數
http://blog.eddie.com.tw/2011/11/18/global-variables-in-coffeescript/

沒有留言:

張貼留言