使用javascript_tag无法查看帮助器

Question

我正在写一个宝石，可以帮助轻松地创建图表。 宝石是d3.js库的某些“上层结构” ...

所以，我试图写一些helper 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。 我该如何解决？

也许我的助手必须不在html.erb文件和js文件中写入JS代码？

也许我需要重新定义javascript_tag以将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元素相关联