Question

我正在玩ajax来在网页上呈现高清图。我想做的是用我的控制器中的ruby信息填充高图上的字段，但到目前为止我无法完成这项工作。我似乎无法实现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

正是在逻辑流程的这一部分，我需要在这里用信息填充高图。在控制器之后，我使用以下代码移动到这个js.erb文件：

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

这段代码来自bootstrap，并将高图呈现到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]
    }]
  });
});

对于我的生活，我无法弄清楚如何将我的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块但是没有用。有什么帮助吗？

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

正如我们首先想要的那样。

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

1 个答案: