如何将此数组传递给 html.erb 文件中的 javascript 函数，而不需要 erb 评估 Date.UTC？

Question

我正在尝试将 HighStock Stockchart 配置为使用日期时间和值的二维数组。此方法仅在 Highcharts doco 中提到，而不是 highstock 的。

我的视图帮助程序文件中有一个方法：

  def byusers_chart_series(name, byusers)
          data = []
          codes_by_user = byusers.where(:hpmuser => "#{name}").group("date(hpmcreated)").select("date(hpmcreated) as dater, count(globalcode) as codes")
          codes_by_user.each do |record|
            #x = [Date.UTC("#{record.dater.year.inspect.to_i}", "#{record.dater.day.inspect.to_i}", "#{record.dater.month.inspect.to_i}"), "#{record.codes.inspect.to_i}"]
            x = [Date.UTC("#{record.dater.year.inspect.to_i}", "#{record.dater.day.inspect.to_i}", "#{record.dater.month.inspect.to_i}"), "#{record.codes.inspect.to_i}"]
            data << Array(x)
          end

          data
  end

这是返回的数组，与我希望它出现在 javascript 中的完全一样：

[[Date.UTC(2012, 1, 2), 1],
[Date.UTC(2012, 2, 2), 5],
[Date.UTC(2012, 3, 2), 15],
[Date.UTC(2012, 6, 2), 8],
[Date.UTC(2012, 7, 2), 3],
[Date.UTC(2012, 8, 2), 73],
[Date.UTC(2012, 9, 2), 77]]

这是 html.ERB 文件中的代码：

<script type="text/javascript" charset="UTF-8">

    $(function() {
        new Highcharts.StockChart({

            chart : {
                renderTo: 'weeks52dynamic',
                borderColor: '#EBBA95',
                borderWidth: 3
            },

            legend : {
                align : "left",
                enabled : true,
                layout : "vertical",
                verticalAlign : "top"
            },

            rangeSelector : {
                selected : 0
            },

            title : {
                text : 'title'
            },

            scrollbar: {
                barBackgroundColor: 'gray',
                barBorderRadius: 7,
                barBorderWidth: 0,
                buttonBackgroundColor: 'gray',
                buttonBorderWidth: 0,
                buttonBorderRadius: 7,
                trackBackgroundColor: 'none',
                trackBorderWidth: 1,
                trackBorderRadius: 8,
                trackBorderColor: '#CCC'
            },
            xAxis: {
                title: {
                    text: "Date"
                },

                type: "datetime",
                dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
         }

            },
            yAxis: {
                min: 0,
                title: {
                    text: "Number of Codes"
                }


            },
            series: [
            <% { "New Codes" => Newcode.codesperday }.each do |name, newcodes| %>
            {
                name: "<%= name %>",
                 pointInterval: <%= 1.day * 1000 %>,
                 pointStart: <%= 350.weeks.ago.to_i * 1000 %>,
                data: <%= newcodes_chart_series(newcodes, 350.weeks.ago) %>,
                marker : {
                    enabled : true,
                    radius: 3
                }
            },
            <% end %>
            <% { "User" => Newcode.byuser }.each do |name, byusers| %>
            {
                name: "<%= name %>",
                data: <%= byusers_chart_series(name, byusers) %>,
                marker : {
                    enabled : true,
                    radius: 3
                }
            }
            <% end %>
            ]

        });

    });


</script>

我在浏览器中遇到的错误，我认为 ERB 模板正在尝试评估 Date.UTC 函数，而不是将其传递给 JavaScript 来执行。我的问题是，每当我在一个或多个数组中的 Data.UTC 周围放置任何类型的引号时，引号都会出现在发送到 javascript 的最终数组中。

如何传递精确的数组数组而不让 ruby​​ 对其进行评估？

Answer 1

在我们修复它的同时，让您的方法变得更简单。如果您发现自己有这样的代码：

foo = []
bar.each{ … foo << jim }

...那么您应该使用以下代码：

foo = bar.map{ … jim }

您的 Ruby 代码中有 Date.UTC，这需要 Ruby 来运行此代码在构建阵列时。我们不会创建数组的数组，而是使用 < code>Enumerable#map 将您的 codes_by_user 转换为 字符串 数组，这些字符串是您想要的 JS 代码：

def byusers_chart_series(name, byusers)
  codes_by_user = byusers.where(:hpmuser => "#{name}").group("date(hpmcreated)").select("date(hpmcreated) as dater, count(globalcode) as codes")
  codes_by_user.map do |record|
    parts = %w[year month day].map{ |s| record.dater.send(s) }
    "[Date.UTC(#{parts.join(',')}),#{record.codes}]"
  end
end

然后在您的视图中：

data: [ <%= byusers_chart_series(name, byusers).join(", ") %> ],

这将产生在 HTML 中输出如下所示：

data: [ [Date.UTC(2011,10,7),42], [Date.UTC(2012,4,3),17] ],