javascript - rails : Restricting pure javascript in the asset pipeline to specific views

Question

我正在尝试将我的 AMChart 纯 javascript 从我的 View 中取出并放入到我的 Controller 的 asset/javascripts/中的 .js 文件中，正如 Rails 所喜欢的那样。

我在两个单独的 View 上有两个单独的图表，每个图表都有不同的配置和数据源。

我的问题是，当访问一个 View 时，我收到一个 JavaScript 错误，指出包含另一 View 的图表数据的变量“未定义” - 此错误下方的所有 JavaScript 都会中止。

AMChart JavaScript 只是纯 JavaScript(无 jquery)，在我的 Controller 的两个图表的 .js 文件中看起来像这样:

/// Radar Chart for First View

  var chart;

  AmCharts.ready(function () {
    // RADAR CHART
    chart = new AmCharts.AmRadarChart();
    chart.dataProvider = chartData_radar1;  // <- data variable
    chart.categoryField = "criteria";
    chart.startDuration = 1;
    chart.startEffect = ">";
    chart.sequencedAnimation = true;

    // VALUE AXIS
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridType = "circles";
    valueAxis.fillAlpha = 0.02;
    valueAxis.fillColor = "#000000"
    valueAxis.axisAlpha = 0.1;
    valueAxis.gridAlpha = 0.1;
    valueAxis.fontWeight = "bold"
    valueAxis.minimum = 0;
    valueAxis.maximum = 10;
    chart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.lineColor = "#98cdff"
    graph.fillAlphas = 0.4;
    graph.bullet = "round"
    graph.valueField = "score"
    graph.balloonText = "[[category]]: [[value]]/10"
    chart.addGraph(graph);

    // Balloon Settings
    var balloon = chart.balloon;
    balloon.adjustBorderColor = true;
    balloon.color = "#000000";
    balloon.cornerRadius = 5;
    balloon.fillColor = "#000000";
    balloon.fillAlpha = 0.7
    balloon.color = "#FFFFFF"

    // WRITE
    chart.write("chartdiv");
  });



/// Radar Chart for Second View

  var chart;

  // Draw AM Radar Chart
  AmCharts.ready(function () {
    // RADAR CHART
    chart = new AmCharts.AmRadarChart();
    chart.dataProvider = chartData_radar2;  // <- data variable
    chart.categoryField = "criteria";
    chart.startDuration = 0.3;
    chart.startEffect = ">";
    chart.sequencedAnimation = true;

    // GRAPH - FIRST 5
    var graph = new AmCharts.AmGraph();
    graph.title = "First 5";
    graph.lineColor = "#bdd523"
    graph.fillAlphas = 0.2;
    graph.bullet = "round"
    graph.valueField = "first5"
    graph.balloonText = "[[category]]: [[value]]/10"
    chart.addGraph(graph);

    // GRAPH - LAST 5
    var graph = new AmCharts.AmGraph();
    graph.title = "Last 5";
    graph.lineColor = "#98cdff"
    graph.fillAlphas = 0.2;
    graph.bullet = "round"
    graph.valueField = "last5"
    graph.balloonText = "[[category]]: [[value]]/10"
    chart.addGraph(graph);

    // VALUE AXIS
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridType = "circles";
    valueAxis.fillAlpha = 0.02;
    valueAxis.fillColor = "#000000"
    valueAxis.axisAlpha = 0.1;
    valueAxis.gridAlpha = 0.1;
    valueAxis.fontWeight = "bold"
    valueAxis.minimum = 0;
    valueAxis.maximum = 10;
    chart.addValueAxis(valueAxis);

    // Balloon Settings
    var balloon = chart.balloon;
    balloon.adjustBorderColor = true;
    balloon.color = "#000000";
    balloon.cornerRadius = 5;
    balloon.fillColor = "#000000";
    balloon.fillAlpha = 0.7
    balloon.color = "#FFFFFF"

    // Legend Settings
    var legend = new AmCharts.AmLegend();
    legend.position = "bottom";
    legend.align = "center";
    legend.markerType = "square";
    legend.rollOverGraphAlpha = 0;
    legend.horizontalGap = 5;
    legend.valueWidth = 5;
    legend.switchable = false;
    chart.addLegend(legend);

    // WRITE
    chart.write("chart_radar");
  });

(由于缺乏更好的方法将数据从我的模型获取到 js 方法中，我在 View 中定义了“chartData_radar1”或“chartData_radar2”(例如在上面的第 7 行中调用))

:javascript
  var chartData_radar1 = #{Case.chart_analysis_radar(current_user)};

我并不是在寻找一种黑客/解决方法来让它工作，而是更多地了解Rails如何在 Assets 管道中处理像这样的纯javascript？有没有一种好方法可以根据 View 只加载一个雷达的 JavaScript，而不必将其放入 View 本身？我知道如果你使用 Jquery 选择器，你可以有选择地加载 javascript 的部分，我可以例如以某种方式将这一切打包到 jquery 选择器中？

任何帮助将不胜感激!

Answer 1

尽管这个问题已经很老了，但我会尝试回答 - 可能会对某人有所帮助。

本质上，您想要做的就是通过全局变量将数据从 Rails View 或 Controller 发送到 Javascript:

:javascript
    window.chartData = #{JSON.stringify(@your_data)};

然后在 assets/javascripts/ 中的任何 JS 文件中，您都可以访问此变量。但是，请确保您在页面加载后访问它(因此请使用 jQuery 的 $( document ).ready( function() { ... } ) 或 window.onload = 。 ..(如果您不使用 jQuery):

$( document ).ready( function() {
    ...
    var chart = new AmCharts.AmRadarChart();
    chart.dataProvider = window.chartData;
    ...
});

或

window.onload = function () {
    ...
    var chart = new AmCharts.AmRadarChart();
    chart.dataProvider = window.chartData;
    ...
};

您还可以更进一步。您可以将这样的内容直接添加到您的布局中:

:javascript
    window.config = #{JSON.stringify(@js_config || {})};

然后在任何 Controller 方法中，您需要做的就是:

@js_config[:chart_data] = some_chart_data

现在您可以在任何 JavaScript 中访问它:

console.log(window.config.chart_data)

在这种情况下，是否需要等待页面加载取决于您是否在 head 或 body 中定义了配置变量。