§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( /*...*/ );
路由器也會提供一些其他可用屬性,包括 url
和 type
(HTTP 方法)。例如,也可以像這樣對 jQuery 的 ajax 函數進行上述呼叫
var r = jsRoutes.controllers.Users.get(someId);
$.ajax({url: r.url, type: r.type, success: /*...*/, error: /*...*/ });
需要設定其他屬性(例如成功、錯誤、內容等)時,需要上述方法。
absoluteURL
和 webSocketURL
是方法(而非屬性),會傳回完整的網址字串。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
路由器方法的物件,並且應預期路由器已在其上將 type
和 url
屬性設定為路由器請求的適當方法和 url。
若要定義此函數,請在動作中傳遞 ajaxMethod
方法參數,例如
JavaScriptReverseRouter("jsRoutes", Some("myAjaxFunction"))(
routes.javascript.Users.list,
routes.javascript.Users.get
)
下一步:自訂繫結
在此文件中發現錯誤?此頁面的原始碼可以在 這裡 找到。在閱讀 文件指南 後,請隨時提交 pull request。有問題或建議要分享嗎?請前往 我們的社群論壇 與社群展開對話。