为什么不't我的ruby代码与javascript文件一起插入

Why doesn't my ruby code interpolate with my javascript files?

本文关键字：javascript 文件 一起 插入 代码 ruby 我的 为什么不      更新时间：2023-09-26

我正在使用ajax在网页上渲染高图。我想做的是用我的控制器中的ruby信息填充highchart上的字段，但到目前为止我还无法做到这一点。我似乎无法理解Ryan Bates在这一集的RailscastsRailscasts中所做的事情

我在这个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，并将highchart呈现到id为#graphModal的modaldiv上。

这就是我遇到问题的地方。我的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块，但它不起作用。有什么帮助吗？

请记住，您的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';

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

相关文章：