Rails：限制資產管道中的純javascript到特定視圖

Question

我試圖讓我的AMChart純粹的javascript出於我的視圖，並進入assets/javascripts/.js文件中，因爲Rails喜歡它。

我在兩個獨立的視圖上有兩個獨立的圖表，每個視圖都有不同的配置和數據源。

我的問題是，當訪問一個視圖時，我得到一個javascript錯誤，說包含圖表數據的變量包含其他視圖'未定義' - 此錯誤下面的所有javascript都將被中止。

的AMChart JavaScript是隻是純JavaScript（無jQuery的），看起來像這樣在我的控制器的.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方法我定義「chartData_radar1」或「chartData_radar2」（被稱爲例如，在上述7號線）中的觀點，如）

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

我沒有那麼多尋找黑客/變通方法來得到這個工作，但更多的是要知道什麼是Rails的方式來處理像JavaScript一樣的純JavaScript他在資產管道中？有沒有一種很好的方式來根據視圖只加載一個雷達的JavaScript，而不必將其放入視圖本身？我知道如果你使用JQuery選擇器，你可以選擇性地加載JavaScript的部分，我可以以某種方式把這些全部包裝在jQuery選擇器中？

任何幫助將不勝感激！

Answer 1

即使這個問題很老，我會嘗試回答 - 可能會幫助某人。

基本上你想要做的是發送數據從Rails視圖或控制器的Javascript通過一個全局變量是什麼：

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

然後在任何您的JS文件的assets/javascripts/你可以訪問此變量。但是，請確保你訪問它的頁面加載後（因此使用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 || {})}; 

然後在你的任何控制器方法，所有你需要做的是：

@js_config[:chart_data] = some_chart_data 

現在你可以在任何訪問這個你JavaScript的：

console.log(window.config.chart_data) 

在這種情況下，是否需要等待頁面加載取決於是否在您的頭部或身體定義配置變量。