在播放模板中使用 javascript答案

【问题标题】：Using javascript in play template在播放模板中使用 javascript
【发布时间】：2015-07-17 17:46:16
【问题描述】：

我正在使用 Play！框架。我有一个 scala.html 模板文件。

我正在尝试添加一个 Google javascript 库以将图表添加到 Web 应用程序。

基本上需要用我自己的值填充以下函数：

function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Sales'],
          ['2004',  1000],
          ['2005',  1170],
          ['2006',  660],
          ['2007',  1030]
        ]);

所以我做了以下事情（这适用于 HTML 文件的其他部分，但不适用于 Javasript）：

@for(run <- currentPage.getList) {
      [@run.date.format("dd MMM yyyy"),@run.sales],
                      }

但是以 @ 符号为前缀的 Scala 代码在 Javascript 中不起作用。

谁能给点建议？

谢谢。

这是整个代码：

@main {

    <h1 id="homeTitle">@Messages("runs.listRuns.title", currentPage.getTotalRowCount)</h1>

    @if(flash.containsKey("success")) {
        <div class="alert-message warning">
            <strong>Done!</strong> @flash.get("success")
        </div>
    }


    <!-- CHART  -->
         <html>
          <head>
            <script type="text/javascript"
                  src="https://www.google.com/jsapi?autoload={
                    'modules':[{
                      'name':'visualization',
                      'version':'1',
                      'packages':['corechart']
                    }]
                  }"></script>

            <script type="text/javascript">
              google.setOnLoadCallback(drawChart);

              function drawChart() {
                      var data = google.visualization.arrayToDataTable([
                      ['Date', 'Success Percentage'],

                      @for(run <- currentPage.getList) {
                          [@run.runDate.format("dd MMM yyyy"), @run.successPercentage],
                      }

                  ]);



                var options = {
                  title: 'Engineless Performance Monitoring',
                  curveType: 'function',
                  legend: { position: 'bottom' }
                };

                var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

                chart.draw(data, options);
              }
            </script>
          </head>
          <body>
            <div id="curve_chart" style="width: 80%; height: 500px"></div>
          </body>
        </html>
    <!-- CHART -->

    <div id="actions">    
        <form action="@link(0, "name")" method="GET">
            <input type="search" id="searchbox" name="f" value="@currentFilter" placeholder="Filter by Run Name...">
            <input type="submit" id="searchsubmit" value="Filter by Run Name" class="btn primary">
        </form>
    </div>

【问题讨论】：

你能发布整个通话（结合javascript和scala）吗？（它应该有效，我一直在这样做；））
您是否为此使用单独的 javascript 文件，然后将其包含在 html 中？
@Peanut 谢谢。我更新了原来的问题。
检查您的浏览器控制台！它不起作用，因为 JS 不接受最后一个逗号字符，也许你还会发现其他错误
检查你的源代码，检查它在那里打印的元素，以获取 graphData 值。

标签： javascript scala playframework playframework-2.0

【解决方案1】：

我认为您需要在日期周围添加引号：

@for(run <- currentPage.getList) {
  ['@run.runDate.format("yyyy")', @run.successPercentage],
 }

【讨论】：

这仍然不起作用。大概，还有别的。就是想不通。
我编辑了日期格式，所以它显示了年份数字，就像你的例子一样......你能告诉我们你的错误吗？（可能是 JavaScript 控制台？）

【解决方案2】：

第一件事：无论如何，您都应该使用浏览器检查工具来读取错误，通过简单循环收集这样的数据并不是一个好主意，因为您可以看到最后一项后有一个孤立的逗号字符 - JavaScript 不接受这个。

最好的选择是在控制器的操作中构建 JSON 对象，然后将其作为参数传递给视图。它保证您不会有任何语法错误，例如孤儿逗号、未闭合的括号等。此外，如果没有项目，它将生成有效的 JS 代码，如
var data = google.visualization.arrayToDataTable([]);（空数组）

Java 伪代码如下所示（当然，在您的情况下，您需要迭代您的集合以填充 myValues List

public static Result chartData() {

    // For JS you need an array of arrays, so use a List of Lists in Java
    List<List<Object>> myValues = new ArrayList<>();

    // Add the header
    myValues.add(new ArrayList<Object>(Arrays.asList("Date", "Sale")));

    // Inserting dummy data, 
    // in this place you should iterate your `currentPage.getList()` instead
    myValues.add(new ArrayList<Object>(Arrays.asList("2010", 1000)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2011", 1030)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2012", 1530)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2013", 3507)));


    // Convert the values to JSON 
    // and wrap it with play.twirl.api.Html, so you won't need to do this within the template
    Html chartData = new Html(Json.toJson(myValues).toString());

    return ok(views.html.myChart.render(chartData));
}

和您的 myChart.scala.html 视图

@(chartData: Html)

<script>
    var chartData = @chartData;
    console.log(chartData);

    // Or in your case...
    var data = google.visualization.arrayToDataTable(@chartData);
</script>

浏览器中的结果 HTML 代码为：

<script>
    var chartData = [["Date","Sale"],["2010",1000],["2011",1030],["2012",1530],["2013",3507]];
    console.log(chartData);

    // Or in your case...
    var data = google.visualization.arrayToDataTable([["Date","Sale"],["2010",1000],["2011",1030],["2012",1530],["2013",3507]]);
</script>

【讨论】：

对不起，我没有使用 Scala 的经验来准备相同的示例，无论如何我很确定将它“翻译”成 Scala 动作没有问题。
感谢您的回答。在列表中，我现在知道方向了！