nette.ajax.js

對於 Nette 框架

AJAX 的靈活實用腳本。支援片段、重定向等。

執照

麻省理工學院

依賴關係

jQuery 1.7

安裝

1. 將nette.ajax.js複製到包含 Javascript 檔案的目錄中（您可以使用 Bower 來實現此目的）。
2. 連結範本中的文件（通常在app/@layout.latte中，在 jQuery 之後！）。
3. 將初始化例程放在某處：

 $ ( function ( ) {
	$ . nette . init ( ) ;
} ) ; 

用法

預設情況下，所有具有 CSS 類別ajax的連結和表單都將立即進行 ajax 化。可以在init擴充的配置中更改行為。呼叫傳回的var init = $.nette.ext('init');有這些道具：

姓名	預設值	描述
linkSelector	a.ajax	連結的 CSS 選擇器
formSelector	form.ajax	表單的 CSS 選擇器
buttonSelector	input.ajax[type="submit"], input.ajax[type="image"]	負責提交的表單元素的 CSS 選擇器

Ajaxification 綁定到nette命名空間中的click （ submit ）事件。可以使用以下程式碼取消特定連結的 Ajaxification（而其他回呼將保留）：

 $ ( 'a.no-ajax' ) . off ( 'click.nette' ) ;

或更簡單：

 $ ( 'a.no-ajax' ) . netteAjaxOff ( ) ; 

擴充

Ajaxification 封裝了標準$.ajax()調用，並用多個事件擴展了它，這些事件可以與自訂回調掛鉤。一組相關的回調稱為擴展。片段處理、透過Escape取消正在運行的請求的能力……所有這些功能都是以擴展的形式實現的。擴充的註冊如下圖所示：

 $ . nette . ext ( 'name' , {
    event1 : function ( ) {
    } ,
    event2 : ...
} , {
    // ... shared context (this) of all callbacks
} ) ;

第一個參數是名稱。這是可選的。

第二個參數應該是回呼的雜湊值，其鍵對應於事件名稱。這些活動可用：

姓名	論點	描述
init		在$.nette.init();稱呼。
load	requestHandler	應該包含 ajaxification。 requestHandler可以綁定UI事件來發起AJAX請求。
before	jqXHR ， settings	在 AJAX 請求執行之前立即呼叫。如果傳回 FALSE，則請求不會啟動。
start	jqXHR ， settings	AJAX 請求開始後立即呼叫。
success	payload 、 status 、 jqXHR 、 settings	成功完成 AJAX 請求後呼叫。等價於$.ajax( ... ).done( ... .
complete	jqXHR ， status ， settings	每個 AJAX 請求完成後呼叫。等價於$.ajax( ... ).always( ... .
error	jqXHR ， status ， error ， settings	AJAX 請求失敗時呼叫。相當於$.ajax( ... ).fail( ... .

可以禁用擴充：

 $ . nette . ext ( 'name' , null ) ;

可以配置擴充。其上下文可以透過以下方式取得：

 var context = $ . nette . ext ( 'name' ) ; 

預設擴展名

姓名	描述
validation	將 ajaxification 限制為不使用Ctrl 、 Alt或Shift鍵的點擊/提交、本機連結和有效的表單提交。
forms	新增了對提交表單的支持，其中包含所有資料、單擊按鈕的名稱以及[type=image]輸入中的單擊座標。
snippets	透過回應中的snippets陣列更新 DOM（Latte 片段的預設 Nette 處理）。
redirect	執行重定向到不同的 URL（當在 Presenter 中呼叫$this->redirect()時）。可以用history擴充來代替。
unique	僅保持同一時刻運作的請求。
abort	允許使用者透過按Escape中止正在運行的請求。
init	預設ajax化。

有用的技巧

所有這些特殊功能都期望所有預設擴充功能都處於開啟狀態。

data-ajax-off

連結或任何其他 ajax 化元素可以具有自訂資料屬性data-ajax-off 。它包含擴展名，應該為元素上觸發的 Ajax 請求停用該擴展名。

 < a n:href =" do! " class =" ajax " data-ajax-off =" snippets " >

您也可以在$.nette.ajax()中使用它。像這樣：

 $ . nette . ajax ( {
	url : ... ,
	off : [ 'snippets' ]
} ) ;

data-ajax-pass （在validation擴充中）

元素的 Ajaxification 可確保呼叫e.preventDefault() 。如果您需要觸發更多回調，此屬性可以阻止它。

data-ajax-append （在snippets擴充中）

具有此屬性的程式碼片段的新內容不會取代舊內容，而是會附加到舊內容中。

data-ajax-prepend （在snippets擴展中）

具有此屬性的程式碼片段的新內容不會取代舊內容，而是會新增到舊內容之前。

data-ajax-validate （在validation擴充中）

點擊連結或提交表單將在各種條件下進行驗證。您可以切換其中任何一個：

 < a n:href =" do! " class =" ajax " data-ajax-validate =' {"keys":false} ' >

與data-ajax-off的情況一樣，您可以將其直接傳遞到$.nette.ajax() 。

 $ . nette . ajax ( {
	url : ... ,
	validate : {
		keys : false
	}
} ) ;

這表示使用 Ctrl 點擊連結不會開啟新選項卡，但會使用 ajaxify 請求。

對其他擴充的依賴

在事件回呼中，您可以呼叫this.ext()來取得其他擴充的上下文。如果新增true作為第二個參數，則如果該擴充功能不可用，腳本將失敗。

 $ . nette . ext ( {
	success : function ( payload ) {
		var snippets = this . ext ( 'snippets' , true ) ;
		...
	}
} ) ;