nette.ajax.js

Untuk Kerangka Nette

Skrip utilitas fleksibel untuk AJAX. Mendukung cuplikan, pengalihan, dll.

Lisensi

MIT

Ketergantungan

jQuery 1.7

Instalasi

1. Salin nette.ajax.js ke direktori Anda dengan file Javascript (Anda dapat menggunakan Bower untuk ini).
2. Tautkan file di templat Anda (biasanya di app/@layout.latte , setelah jQuery!).
3. Letakkan rutinitas inisialisasi di suatu tempat:

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

Penggunaan

Secara default semua link dan form dengan kelas CSS ajax akan langsung di ajax. Perilaku dapat diubah dalam konfigurasi ekstensi init . Objek dikembalikan melalui panggilan var init = $.nette.ext('init'); memiliki alat peraga ini:

nama	nilai bawaan	keterangan
linkSelector	a.ajax	Pemilih CSS untuk tautan
formSelector	form.ajax	Pemilih CSS untuk formulir
buttonSelector	input.ajax[type="submit"], input.ajax[type="image"]	Pemilih CSS untuk elemen formulir yang bertanggung jawab untuk mengirimkan

Ajaxification terikat untuk click ( submit ) acara di namespace nette . Ajaxifikasi tautan tertentu dapat dibatalkan dengan kode seperti ini (sementara panggilan balik lainnya akan tetap ada):

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

Atau bahkan lebih sederhana:

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

Ekstensi

Ajaxification menyelubungi panggilan $.ajax() standar dan memperluasnya dengan beberapa peristiwa, yang dapat dikaitkan dengan panggilan balik khusus. Kumpulan callback terkait disebut extension . Pemrosesan cuplikan, kemampuan untuk membatalkan permintaan yang berjalan dengan Escape ... semua fungsi ini diimplementasikan dalam bentuk ekstensi. Pendaftaran ekstensi terlihat seperti ini:

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

Argumen pertama adalah nama. Itu opsional.

Argumen kedua harus berupa hash panggilan balik dengan kunci yang sesuai dengan nama peristiwa. Acara ini tersedia:

nama	argumen	keterangan
init		Dipanggil sekali saja selama $.nette.init(); panggilan.
load	requestHandler	Harus mengandung ajaxifikasi. requestHandler dapat diikat ke acara UI untuk memulai permintaan AJAX.
before	jqXHR , settings	Dipanggil segera sebelum eksekusi permintaan AJAX. Jika FALSE dikembalikan, permintaan tidak akan dimulai.
start	jqXHR , settings	Dipanggil segera setelah dimulainya permintaan AJAX.
success	payload , status , jqXHR , settings	Dipanggil setelah berhasil menyelesaikan permintaan AJAX. Setara dengan $.ajax( ... ).done( ... .
complete	jqXHR , status , settings	Dipanggil setelah setiap permintaan AJAX selesai. Setara dengan $.ajax( ... ).always( ... .
error	jqXHR , status , error , settings	Dipanggil jika permintaan AJAX gagal. Setara dengan $.ajax( ... ).fail( ... .

Ekstensi dapat dinonaktifkan:

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

Ekstensi dapat dikonfigurasi. Konteksnya dapat diperoleh dengan:

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

Ekstensi bawaan

nama	keterangan
validation	Membatasi ajaxifikasi pada klik/pengiriman tanpa tombol Ctrl , Alt atau Shift , tautan lokal, dan pengiriman formulir yang valid.
forms	Menambahkan dukungan untuk mengirimkan formulir dengan semua data, nama tombol yang diklik, dan koordinat klik pada input [type=image] .
snippets	Memperbarui DOM berdasarkan larik snippets sebagai respons (penanganan default Nette terhadap cuplikan Latte).
redirect	Menjalankan pengalihan ke URL yang berbeda (ketika $this->redirect() dipanggil di presener). Dapat diganti dengan ekstensi history .
unique	Hanya membuat permintaan berjalan pada saat yang sama.
abort	Memungkinkan pengguna untuk membatalkan permintaan yang berjalan dengan menekan Escape .
init	ajaxifikasi bawaan.

Trik yang berguna

Semua fitur khusus ini mengharapkan semua ekstensi default diaktifkan.

data-ajax-off

Tautan atau elemen ajax lainnya dapat memiliki atribut data khusus data-ajax-off . Ini berisi nama ekstensi, yang harus dinonaktifkan untuk permintaan Ajax yang diaktifkan pada elemen.

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

Anda juga dapat menggunakannya di $.nette.ajax() . Seperti ini:

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

data-ajax-pass (dalam ekstensi validation )

Ajaxifikasi elemen memastikan, bahwa e.preventDefault() akan dipanggil. Atribut ini dapat mencegahnya, jika Anda memerlukan lebih banyak panggilan balik untuk diaktifkan.

data-ajax-append (dalam ekstensi snippets )

Konten cuplikan baru dengan atribut ini tidak akan menggantikan konten lama, melainkan akan ditambahkan ke dalamnya.

data-ajax-prepend (dalam ekstensi snippets )

Konten cuplikan baru dengan atribut ini tidak akan menggantikan konten lama, namun akan ditambahkan ke dalamnya.

data-ajax-validate (dalam ekstensi validation )

Klik tautan atau penyerahan formulir divalidasi dengan berbagai kondisi. Anda dapat mengganti salah satunya:

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

Dan seperti halnya data-ajax-off , Anda dapat meneruskannya langsung ke $.nette.ajax() .

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

Artinya mengklik link dengan Ctrl tidak akan membuka tab baru, tetapi akan melakukan ajaxify permintaan.

Ketergantungan pada ekstensi lain

Dalam panggilan balik acara, Anda dapat memanggil this.ext() untuk mendapatkan konteks ekstensi lainnya. Jika Anda menambahkan true sebagai argumen kedua, skrip akan gagal jika ekstensi itu tidak tersedia.

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