2014-03-07 34 views
1

我正在寫一個有助於輕鬆創建圖表的gem。 寶石是一些d3.js庫的「上層建築」...javascript_tag不工作的視圖助手

所以,我想寫一些幫手chart_for,它必須在html頁面上創建圖表。幫手

例如:

 

    def chart_for(text) 
     bar_chart = %q[ 
     $(document).ready(function() { 
      var data = [4, 8, 16, 20, 12, 48]; 
      var x = d3.scale.linear().domain([0, d3.max(data)]).range([0, 420]); 
      d3.select(".chart").selectAll("div").data(data).enter().append("div").style("width", function(d){ return x(d) + "px"; }).text(function(d){ return d; }); 
     }); 
     ] 
     javascript_tag(bar_chart) 
    end 
 

但不幸的是,我有一些問題,JS加載。

這是我的網頁來源:

chart_for helper on html page

和頁面的最後幾行:

enter image description here

和錯誤:

error

據我瞭解,瀏覽器試圖在d3.js加載頁面之前從我的幫助器運行JS。 我該如何解決它?

也許我的幫手必須將JS代碼寫入html.erb文件並寫入js文件?

也許我需要重新定義javascript_tag從助手寫入JS代碼到HTML頁面的末尾?

請把我推在正確的方向:)

回答

0

這個幫手將JS代碼附加到頁面的中間,當jquery沒有被定義 - js定義在頁面底部,此時瀏覽器不知道它。 這就是出現當前錯誤的原因。

怎麼辦:

  1. 移動JS代碼幫手JS文件,之後jquery.jsd3.js文件附加到頁面底部
  2. 變化的輔助內容與一些#id
  3. 準標記你的JS代碼用#id元素
0

你可以嘗試

jQuery(document).ready(function() { 

而不是

$(document).ready(function() { 

我曾經有$帶我使用了一些庫衝突。這爲我做了一個快速但非常規的技巧。

+0

問題不在於jQuery版本,問題在於如何e javascript_tag在頁面末尾寫入js-code(畢竟js文件) – bmalets

+0

但是非常感謝您的回答;) – bmalets