javascript - 为什么我的 ruby​​ 代码不能插入我的 javascript 文件？

Question

我正在使用 ajax 在网页上渲染高图表。我想做的是用我的 Controller 中的 ruby​​ 信息填充 highchart 上的字段，但到目前为止我无法完成这项工作。我似乎无法实现 Ryan Bates 在这一集中的 Railscasts Railscasts with charts 中所做的事情

我在此 html.haml 文件中开始渲染:

= link_to(t('compare.view_as_graph'), compare_graph_projects_url(project_data: opts[:graph]), remote: true)
.modal.fade#graphModal

然后这将我带到执行此代码的compare_controller:

def projects_graph
  @metric = params[:project_data][:metric]
  @project_0 = params[:project_data][:project_0]
  @project_1 = params[:project_data][:project_1]
  @project_2 = params[:project_data][:project_2]
end

正是在逻辑流程的这一部分中，我需要使用此处的信息填充 highchart。在 Controller 之后，我使用以下代码移动到此 js.erb 文件:

$('#graphModal').modal();

这段代码来自 bootstrap，并将 highchart 渲染到 id 为 #graphModal 的模态 div 上。

这就是我遇到问题的地方。我的compare.js 文件中的代码包含以下内容:

 $(function() {
  new Highcharts.Chart({
    chart: {
      renderTo: "graphModal",
      height: 450,
      width: 700,
      borderWidth: 5,
      borderColor: '#525252'
    },
    title: {
      text: "Project Comparison Graph"
    },
    subtitle: {
      text: '# of contributors who made changes to the project source code each month'
    },
    series: [{
      // Look into pointStart and pointInterval
      // Also look into array of array values
      data: [1, 2, 3]
    }]
  });
});

我一生都无法弄清楚如何将 Controller 中的 ruby​​ 代码放入此compare.js 文件中。这不起作用:

(代码片段)

title: {
  text: @metric
 }

也不是这个(因为我使用的是 haml):

title: {
  text: = @metric
 }

js.erb 文件中也没有这个:

var metric = <%= @metric %>;
$('#graphModal').modal();

当我执行上面的代码时，图表停止渲染并且指标未定义，尽管我的日志显示模态以 200 渲染。

我尝试将代码内联到我的 html.haml 中，如下所示:

  :ruby
  metric = opts[:graph][:metric] if opts[:graph].present?
  project_0 = opts[:graph][:project_0] if opts[:graph].present? && opts[:graph][:project_0].present?
  project_1 = opts[:graph][:project_1] if opts[:graph].present? && opts[:graph][:project_1].present?
  project_2 = opts[:graph][:project_2] if opts[:graph].present? && opts[:graph][:project_2].present?

:javascript
 $(function() {
  new Highcharts.Chart({
    chart: {
      renderTo: "graphModal",
      height: 450,
      width: 700,
      borderWidth: 5,
      borderColor: '#525252'
    },
    title: {
      text: "Project Comparison Graph"
    },
    subtitle: {
      text: metric #ruby code goes here.
    },
    series: [{
      // Look into pointStart and pointInterval
      // Also look into array of array values
      data: [1, 2, 3]
    }]
  });
});

我别无选择。为什么这些方法都不起作用。最后，我尝试了 javascript_tag block ，但不起作用。有什么帮助吗？

Answer 1

请记住，您的 ruby​​ 代码和 Javascript 代码根本不会同时计算:

• 您的服务器读取 ruby​​ 代码并生成 HTML 和 Javascript
• 您的浏览器仅接收 HTML 和 Javascript 并对其进行评估

就您而言:

# in controller
@metric = 'kilometers'
# in view
var metric = <%= @metric %>;
# will output in javascript
var metric = kilometers;
# but `kilometers` is not declared as a JS string

如果你想在 js 中将值打印为字符串，请不要忘记引号:

# with ERB
var metric = '<%= @metric %>';
# with HAML
metric = '#{@metric}'

这将在 javascript 中输出:

var metric = 'kilometers';

正如我们最初想要的那样。