为什么JS代码保存在Play Framework的外部文件中时停止工作答案

【问题标题】：Why does JS code stop working when saved in an external file in the Play Framework为什么JS代码保存在Play Framework的外部文件中时停止工作
【发布时间】：2017-03-13 02:59:35
【问题描述】：

我目前正在 PlayFramework 中重构我的 myFile.scala.html。

JS 作为 内联代码 正确返回带有数据的谷歌图表：

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() { 
...

};

但在作为单独的 .js 文件导入时返回一个空图表：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="@routes.Assets.at("/public/javascripts", "myChart.js")"></script>

我的路线是这样的：

GET     /javascripts/*file          controllers.Assets.at(path="/public/javascripts", file)

呈现空图表的事实表明它可以很好地读取 JS，但不会读取数据。为什么不读取数据？

ETA - @AndriyKuba，这是您要求提取的 JS 代码：

  google.charts.load('current', {'packages':['corechart', 'controls']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'dateTime');
      data.addColumn('number', 'Count');
      var mapString = "@map";
      var pairsArray = mapString.split(",");
      pairsArray.forEach(function(pair) {
      ...
      data.addRows([[dateString, count]]);
      });
      var dashboard = new google.visualization.Dashboard(document.getElementById('myChart_div'));
      var Slider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
          ...
          }
        });
        var barCh = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart_div',
          'options': {
            ...
          }
        });
      dashboard.bind(Slider, barCh);
      google.visualization.events.addListener(dashboard, 'ready', onReady);
        dashboard.draw(data);

        function onReady() {
            google.visualization.events.addListener(barCh.getChart(), 'select', selectHandler);

            function selectHandler(e){
                window.location.href='/mydata/' + data.getValue(barCh.getChart().getSelection()[0].row, 0);
            };
        }
  }

.scala.html 文件顶部的我的 scala 变量：

@(count: Int, schCount: Int, list: List[String], myVariable: String, apiSelector: List[String], map: Map[String, Integer])

我的数据在 mongoDB 上，并作为 java 列表对象读入。就像我说的，完全相同的语法是内联的，但不是从单独的 js 文件链接的。我怀疑它是 scala 变量，我试图引入一个全局变量 inline 并在 JS 文件中引用它，但到目前为止这对我不起作用。有什么想法吗？

【问题讨论】：

标签： javascript html scala playframework google-visualization

【解决方案1】：

我做了检查，它有效。

这里的路由器有问题，javascript 文件夹翻了一番。

GET     /javascripts/*file          controllers.Assets.at(path="/public", file)

然后将资产用作

<script type="text/javascript" src="@routes.Assets.at("javascripts/myChart.js")"></script>

更新

我的控制器：

val chartData = """[
        ['Michael' , 5],
        ['Elisa', 7],
        ['Robert', 3],
        ['John', 2],
        ['Jessica', 6],
        ['Aaron', 1],
        ['Margareth', 8]
      ]"""

Ok(views.html.charts(chartData))

我的charts.scala.html：

@(chartData: String)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="@routes.Assets.versioned("javascripts/charts.js")" type="text/javascript"></script>
    <script type="text/javascript">
      var myData = @Html(chartData);
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

我的charts.js：

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'dateTime');
  data.addColumn('number', 'Count');
  data.addRows(myData);

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

  var Slider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter_div',
      'options': {
          'filterColumnLabel': 'Count'
      }
    });

  var barCh = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart_div',
      'options': {
          'width': 300,
          'height': 300,
          'pieSliceText': 'value',
          'legend': 'right'
      }
    });

  dashboard.bind(Slider, barCh);
  dashboard.draw(data);
}

结果：

【讨论】：

很遗憾不是这样。我不认为它与路由相关，因为页面和空的谷歌图表会加载。只是我的图表数据丢失了，但在 JS 内联时加载。
我从这个例子中获取 JS 代码：developers.google.com/chart/interactive/docs/quick_start 把它放在外部 js 文件中，然后创建一个 HTML 页面并在该页面上加载这个文件 - 它的工作。所以看起来，您的代码中有路线问题或打印错误。你能添加所有的JS代码吗？（或重现问题的部分）
硬编码项目加载，@AndriyKuba。是动态数据没有做到。在我的例子中，一个表的 java List 对象和一个谷歌图表的 java Map 对象。我尝试设置一个全局变量 inline 并在 JS 中调用它，但我很难做到这一点。
您不能在资产中使用动态变量。所以你需要把动态变量放在页面上或者通过调用API来加载它们。我看到您在脚本中使用了var mapString = "@map" - 这在资产中不起作用。将其放在页面（旋转模板）和您拥有的所有动态数据上。
好的。我已经在 html 头中引入了一个全局变量，并在 JS 中调用它。控制台读取数据，但图表没有读取数据。

【解决方案2】：

最后我解决了。正如我一直怀疑的那样，这不是路由问题。我在 html 头中引入了一个全局变量，用于 scala 对我的地图（“@map”）的引用：

<script>
window.APP = {map: '@map'};
</script>

并在主图表函数中调用它：

function drawChart() {
  var map = window.APP.map;
  ...
  var mapString = map;
  ...
}

【讨论】：