為什么我的ruby代碼不插入我的javascript文件？

Question

我正在玩ajax在網頁上渲染高圖圖形。 我想做的是用來自控制器的紅寶石信息填充highchart上的字段，但到目前為止我還無法完成這項工作。 我似乎無法實現Ryan Bates在本集的Railscasts中使用圖表進行的操作

我開始在此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

在邏輯流程的這一部分中，我需要使用此處的信息填充高圖。在控制器之后，我將使用以下代碼移至此js.erb文件：

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

此代碼段來自引導程序，並將高圖表繪制到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]
    }]
  });
});

對於我一生，我無法弄清楚如何將控制器中的紅寶石代碼放入此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塊，但這沒有用。 有什么幫助嗎？

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';

首先我們想要的。