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

Question

I am playing around with ajax to render a highchart graph on a web page. What I'd like to do is to populate the fields on highchart with ruby information from my controller but so far I'm unable to make this work. I can't seem to implement what Ryan Bates is doing in this episode of Railscasts Railscasts with charts

I begin the rendering in this html.haml file:

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

Then this takes me to the compare_controller where this code is executed:

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

It is in this part of the logic flow where I need to populate the highchart with the information here.After the controller I move onto this js.erb file with this code:

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

This snippet of code is from bootstrap and renders the highchart onto the modal div that has an id of #graphModal.

This is where I am having problems. The code in my compare.js file contains this:

 $(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]
    }]
  });
});

For the life of me I can't figure out how to place my ruby code from the controller into this compare.js file. This doesn't work:

(snippet of code)

title: {
  text: @metric
 }

nor this (since I'm using haml):

title: {
  text: = @metric
 }

Nor this in the js.erb file:

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

When I do the code above, the chart ceases to render and metric is undefined despite my log saying that the modal rendered with a 200.

I've tried inlining the code in my html.haml like so:

  :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]
    }]
  });
});

I'm out of options. Why is none of these methods working. Lastly, I've tried a javascript_tag block but that isn't working. Any help?

Answer 1

Remember that your ruby code and the Javascript code are not evaluated at the same time at all:

• your server reads the ruby code and generate HTML and Javascript
• your browser only receive HTML and Javascript and evaluate it

In your case:

# 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

Don't forget the quotes if you want to print a value as a string in js:

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

Which will output in javascript:

var metric = 'kilometers';

As we wanted in the first place.