在播放模板中使用javascript

我正在使用Play！框架。我有一個scala.html模板文件。在播放模板中使用javascript

我正在嘗試添加Google JavaScript庫以將圖形添加到Web應用程序。

Basiclly Ineed用自己的價值觀來填充follwoing功能：

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>

來源

2015-05-07 Michael

你能張貼整個呼叫（使用JavaScript和Scala合併）？（它應該工作，我一直在這樣做;）） – Peanut

你使用單獨的JavaScript文件爲此，然後包括在HTML？ –

@Peanut謝謝。我更新了原來的問題。 – Michael

第一件事：你應該用你的瀏覽器檢測工具無論如何讀取錯誤，通過簡單的循環收集數據是不好的 - 因爲你可以看到你在最後一項之後有一個孤兒逗號char - JavaScript不接受這個。

最好的選擇是在控制器的動作中構建JSON對象，然後將它作爲參數傳遞給視圖。它保證你不會有任何語法錯誤，如孤兒逗號，未封閉的支架等另外如果沒有項目，如
var data = google.visualization.arrayToDataTable([]);（空數組）

Java的僞代碼看起來像這樣就會產生有效的JS代碼（當然你的情況，你需要遍歷您的收藏填補了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>

來源

2015-05-07 11:20:39 biesior

對不起，我沒有Scala的經驗來準備同樣的樣本，無論如何，我很確定把它翻譯成Scala動作沒有問題。 – biesior

謝謝你的回答。在名單上，我現在明白了方向！ – Michael

我認爲你需要周圍添加日期引號：

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

來源

2015-05-07 10:26:45 Peanut

這仍然不起作用。可能還有別的東西。只是無法弄清楚。 – Michael

我編輯了日期格式，所以它顯示年份數字，就像你的例子那樣...你能告訴我們你的錯誤嗎？（JavaScript控制檯可能？） – Peanut

在播放模板中使用javascript

回答

相關問題