查看带有 javascript_tag 的助手不起作用答案

【问题标题】：view helper with javascript_tag not working查看带有 javascript_tag 的助手不起作用
【发布时间】：2014-03-07 16:18:14
【问题描述】：

我正在编写一个有助于轻松创建图表的 gem。 Gem 是 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 以将 JS 代码从帮助程序写入 html 页面的末尾？

请把我推向正确的方向:)

【问题讨论】：

标签： javascript ruby-on-rails ruby view-helpers

【解决方案1】：

你可以试试

jQuery(document).ready(function() {

代替

$(document).ready(function() {

我曾经与 $ 与我使用的一些库发生冲突。这对我来说是一个快速但非常规的技巧。

【讨论】：

问题不在 jQuery 版本中，问题是如何让 javascript_tag 在页面末尾写入 js-code（在所有 js 文件之后）

【解决方案2】：

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

做什么：

将 JS 代码从 helper 移动到 JS 文件并附加到页面底部在jquery.js 和d3.js 文件之后
将帮助内容更改为带有一些#id 的标记
将您的 JS 代码与 #id 元素相关联

【讨论】：