Использование JavaScript в игровом шаблоне

Я использую Play! Фреймворк. И у меня есть файл шаблона scala.html.

Я пытаюсь добавить библиотеку Google javascript для добавления графиков в веб-приложение.

По сути, нужно заполнить следующую функцию своими собственными значениями:

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>
Источник

2 ответа

Решение

Во-первых, вы должны в любом случае использовать инструмент проверки браузера, чтобы прочитать ошибки, сбор таких данных простым циклом не является хорошей идеей, поскольку - как вы можете видеть, у вас есть запятая-запятая после последнего элемента - JavaScript не ' Я не могу принять это.

Наилучшим вариантом является создание объекта JSON в действии контроллера, а затем передача его в качестве параметра в представление. Это гарантирует, что у вас не будет никаких синтаксических ошибок, таких как запятые, незакрытые скобки и т. Д. Также, если нет элементов, он генерирует действительный код JS, например
var data = google.visualization.arrayToDataTable([]); (пустой массив)

Псевдокод Java выглядит следующим образом (конечно, в вашем случае вам нужно выполнить итерацию своей коллекции, чтобы заполнить myValuesList

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>
Источник

Я думаю, что вам нужно добавить кавычки вокруг даты:

@for(run <- currentPage.getList) {
  ['@run.runDate.format("yyyy")', @run.successPercentage],
 }
Источник
Другие вопросы по тегам