nette.ajax.js

ネットフレームワークの場合

AJAX 用の柔軟なユーティリティ スクリプト。スニペット、リダイレクトなどをサポートします。

ライセンス

マサチューセッツ工科大学

依存関係

jQuery 1.7

インストール

1. nette.ajax.js Javascript ファイルとともにディレクトリにコピーします (これには Bower を使用できます)。
2. テンプレート内でファイルをリンクします (通常は jQuery の後のapp/@layout.latte内にあります)。
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 ) イベントにバインドされています。特定のリンクの Ajax 化は、次のようなコードでキャンセルできます (他のコールバックは残ります)。

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

または、さらに簡単に:

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

拡張機能

Ajaxification は標準の$.ajax()呼び出しをエンベロープし、カスタム コールバックでフックできるいくつかのイベントでそれを拡張します。関連するコールバックのセットはextensionと呼ばれます。スニペット処理、エスケープによる実行中のリクエストのキャンセル機能...これらすべての機能は拡張機能の形式で実装されています。拡張機能の登録はこんな感じです。

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

最初の引数は名前です。それはオプションです。

2 番目の引数は、イベントの名前に対応するキーを持つコールバックのハッシュである必要があります。次のイベントが利用可能です。

名前	引数	説明
init		$.nette.init();電話。
load	requestHandler	ajax化を含める必要があります。 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	ajax 化を、 Ctrl 、 AltまたはShiftキーを使用しないクリック/送信、ローカル リンク、および有効なフォームの送信に制限します。
forms	[type=image]入力のすべてのデータ、クリックされたボタンの名前、およびクリックの座標を含むフォームを送信するためのサポートを追加します。
snippets	応答のsnippets配列によって DOM を更新します (Latte スニペットのデフォルトの Nette 処理)。
redirect	別の URL へのリダイレクトを実行します (presener で$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拡張機能内)

要素の Ajax 化により、 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()を呼び出して他の拡張機能のコンテキストを取得できます。 2 番目の引数としてtrue追加すると、その拡張機能が利用できない場合、スクリプトは失敗します。

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