使用javascript_tag查看助手无法正常工作

Question

我正在写一个有助于轻松创建图表的宝石。 宝石是d3.js图书馆的一些“上层建筑”...

所以，我正在尝试编写一些帮助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时遇到了一些问题。

这是我的网页来源：

最后几行：

错误：

据我了解，浏览器尝试在d3.js加载到页面之前从我的帮助程序运行JS。 我该如何解决？

也许我的帮助者必须将JS代码写入html.erb文件并写入js文件？

也许我需要重新定义javascript_tag将helper中的JS代码写入html页面的末尾？

请把我推向正确的方向：）

Answer 1

你能试试吗

jQuery(document).ready(function() {

而不是

$(document).ready(function() {

我以前和我使用的某些库有冲突。这对我来说是一个快速但非传统的技巧。

Answer 2

当没有定义jquery时，这个助手将JS代码附加到页面中间 - js在页面底部定义，此时浏览器不知道它。 这就是出现当前错误的原因。

怎么做：

1. 将JS代码从帮助程序移动到JS文件并将其附加到页面底部 在jquery.js和d3.js个文件
之后
2. 将帮助程序内容更改为使用某些#id
标记
3. 将您的JS代码与#id元素
相关联