如何将此数组传递给html.erb文件中的javascript函数，而不使用erb计算Date.UTC

Question

我正在尝试将HighStock Stockchart配置为使用日期时间和值的二维数组。这种方法只在Highcharts文档中提到，而不是在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在构建数组时运行此代码。我们将使用Enumerable#map将您的codes_by_user转换为字符串的数组，而不是创建数组数组：

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] ],