文件

§Javascript 路由

Play 路由器能夠產生 Javascript 程式碼,用於處理從執行於客戶端側的 Javascript 回到應用程式的路由。Javascript 路由器有助於重構你的應用程式。如果你變更 URL 或參數名稱的結構,你的 Javascript 會自動更新為使用新的結構。

§產生 Javascript 路由器

使用 Play 的 Javascript 路由器的第一步是產生它。路由器只會公開你明確宣告的路由,因此將 Javascript 程式碼的大小降到最低。

有兩種產生 Javascript 路由器的方法。一種是使用範本指令將路由器嵌入 HTML 頁面。另一種是在動作中產生 Javascript 資源,可以下載、快取和在頁面之間共用。

§嵌入式路由器

可以在 Scala 範本中使用 @javascriptRouter 指令產生嵌入式路由器。這通常會在主要裝飾範本中執行。

@()(implicit req: play.api.mvc.RequestHeader)

@helper.javascriptRouter("jsRoutes")(
    routes.javascript.Users.list,
    routes.javascript.Users.get
)

第一個參數是將路由器置入其中的全域變數名稱。第二個參數是應包含在此路由器中的 JavaScript 路由清單。如您在上方所見,若要使用此函數,範本的範圍內必須具有隱含的 RequestHeader

§路由器資源

可以透過建立呼叫路由器產生器的動作來產生路由器資源。其語法類似於在範本中嵌入路由器

import javax.inject.Inject

import play.api.http.MimeTypes
import play.api.mvc._
import play.api.routing._
def javascriptRoutes: Action[AnyContent] = Action { implicit request =>
  Ok(
    JavaScriptReverseRouter("jsRoutes")(
      routes.javascript.Users.list,
      routes.javascript.Users.get
    )
  ).as(MimeTypes.JAVASCRIPT)
}

然後,新增對應的路由

GET     /javascriptRoutes      controllers.Application.javascriptRoutes

在實作此動作並將其新增至路由檔案後,您便可以在範本中將其包含為資源

<script type="text/javascript" src="@routes.Application.javascriptRoutes"></script>

§使用路由器

以 jQuery 為例,進行呼叫就像

$.ajax(jsRoutes.controllers.Users.get(someId))
  .done( /*...*/ )
  .fail( /*...*/ );

路由器也會提供一些其他可用屬性,包括 urltype (HTTP 方法)。例如,也可以像這樣對 jQuery 的 ajax 函數進行上述呼叫

var r = jsRoutes.controllers.Users.get(someId);
$.ajax({url: r.url, type: r.type, success: /*...*/, error: /*...*/ });

需要設定其他屬性(例如成功、錯誤、內容等)時,需要上述方法。

absoluteURLwebSocketURL 是方法(而非屬性),會傳回完整的網址字串。WebSocket 連線可以像這樣建立

var r = jsRoutes.controllers.Users.list();
var ws = new WebSocket(r.webSocketURL());
ws.onmessage = function(msg) {
        /*...*/
};

§jQuery ajax 方法支援

注意:內建對 jQuery 的 ajax 函數支援將在未來版本中移除。這部分關於內建支援的說明僅供參考。請勿在新程式碼中使用路由器的 ajax 函數,並儘快考慮升級現有程式碼。關於使用路由器的上一個章節說明了如何使用 jQuery。

如果您不喜歡 jQuery,或者您想以某種方式裝飾 jQuery ajax 方法,您可以提供一個函數給路由器,用於執行 ajax 查詢。此函數必須接受傳遞給 ajax 路由器方法的物件,並且應預期路由器已在其上將 typeurl 屬性設定為路由器請求的適當方法和 url。

若要定義此函數,請在動作中傳遞 ajaxMethod 方法參數,例如

JavaScriptReverseRouter("jsRoutes", Some("myAjaxFunction"))(
  routes.javascript.Users.list,
  routes.javascript.Users.get
)

下一步:自訂繫結


在此文件中發現錯誤?此頁面的原始碼可以在 這裡 找到。在閱讀 文件指南 後,請隨時提交 pull request。有問題或建議要分享嗎?請前往 我們的社群論壇 與社群展開對話。