在播放模板中使用 javascript

Question

我正在使用 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>

Answer 1

我认为您需要在日期前后加上引号：

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

Answer 2

第一件事：你应该使用你的浏览器检查工具来读取错误，通过简单的循环收集这样的数据不是一个好主意，因为你可以看到你在 last 之后有一个孤立的逗号字符item - Java脚本不接受这个。

最好的选择是在控制器的操作中构建 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>

在播放模板中使用 javascript

Using javascript in play template

javascript

scala

playframework

playframework-2.0