preloader
學習

javascript學習記錄

學著自建一個網站服務,本次進度分為兩點:第一點是修正我在Rails controller method自定義的錯誤,第二點是自寫coffeescript檔案,取得view的網頁資料進而產生效果。

第一點:先前在Rails controller method裡寫錯view(MVC概念的View)應要產生的網頁資料,稍早寫成取得資料庫所有資料並轉換成json格式,也就是 render json: @variables,這只能產生具有json格式的資料頁面,不能在其頁面加入自己想要的HTML標籤和javascript效果。修正方法是刪除controller的render json: @variables這行內容,加入view HTML檔案裡面的HTML語法和javascript效果才有出現。

 

第二點:

起初我想要用coffeescript直接操縱controller method的instance,看到stackoverflow的這篇文章說會影響效率。其他人也遇到跟我一樣的問題,另外這篇文章RailsCast的評論提到可以用 gon這個gem,我讀了一些評論,認為這些不是正常MVC的作法,是很dirty的方式,哪天gon gem跟其他gem衝突,我還得花心思修,實在太麻煩了。

參考了這篇stackoverflow解法,避開使用gon gem的作法:View從controller取得的資料庫內容,用HTML的div標籤包圍住以json格式顯示的資料,再用javascript取得view顯示的json格式資料使其成為字串,透過JSON.parse method解析這個字串,使其再度成為JSON格式並存成在coffeescript的變數,做簡單的javascript效果(例如alert)。值得一提的是,經詢問認識的前端長輩,本段稍早所參考stackoverflow Marnen Laibow-Koser解法應調整成 var nodes = JSON.parse($('#nodes').text()),才是正確。

 

本次學習stackoverflow、coffeescript、javascript和Youtube上的網路前端教學課程,也詢問了身邊認識的前端長輩一些js問題。為了驗證javascript是否有運作,運用到jsfiddle網站和Firebug套件,還不知道如何debug javascript,目前我仍在學習用這些工具debug javascript,最終目的是想要嘗試做資料視覺化。