nette.ajax.js

لإطار نيت

برنامج نصي مرن لأداة AJAX. يدعم المقتطفات وعمليات إعادة التوجيه وما إلى ذلك.

رخصة

معهد ماساتشوستس للتكنولوجيا

التبعيات

مسج 1.7

تثبيت

1. انسخ nette.ajax.js إلى الدليل الخاص بك باستخدام ملفات Javascript (يمكنك استخدام Bower لهذا الغرض).
2. اربط الملف في القوالب الخاصة بك (عادةً في app/@layout.latte ، بعد jQuery!).
3. ضع روتين التهيئة في مكان ما:

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

الاستخدام

بشكل افتراضي، سيتم تحويل جميع الروابط والنماذج التي تحتوي على فئة CSS ajax إلى تقنية ajaxified على الفور. يمكن تغيير السلوك في تكوين ملحق 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 click ( submit ) الحدث في مساحة الاسم nette . يمكن إلغاء عملية 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 بأحداث واجهة المستخدم لبدء طلب 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	يقتصر الاجاكس على النقرات/الإرسال بدون مفتاح Ctrl أو Alt أو Shift والروابط المحلية وإرسال النموذج الصالح.
forms	يضيف دعمًا لإرسال النماذج بجميع البيانات واسم الزر الذي تم النقر عليه وإحداثيات النقر في مدخلات [type=image] .
snippets	يقوم بتحديث DOM من خلال مجموعة snippets استجابةً لذلك (معالجة Nette الافتراضية لمقتطفات Latte).
redirect	ينفذ إعادة التوجيه إلى عنوان URL مختلف (عند استدعاء $this->redirect() في مقدم العرض). يمكن استبداله بامتداد history .
unique	يبقي الطلب الوحيد قيد التشغيل في نفس اللحظة.
abort	يسمح للمستخدم بإلغاء الطلب الجاري بالضغط على Escape .
init	الاجاكس الافتراضي.

حيل مفيدة

تتوقع كل هذه الميزات الخاصة تشغيل كافة الامتدادات الافتراضية.

data-ajax-off

يمكن أن يحتوي الرابط أو أي عنصر آخر مؤجج على سمة بيانات مخصصة 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 )

يضمن أجاكس العنصر استدعاء 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 لن يفتح علامة تبويب جديدة، بل سيؤدي إلى إضفاء لمسة أجاكسية على الطلب.

الاعتماد على امتداد آخر

في عمليات الاسترجاعات الخاصة بالأحداث، يمكنك استدعاء this.ext() ‎ للحصول على سياق ملحق آخر. إذا أضفت true كوسيطة ثانية، فسيفشل البرنامج النصي إذا لم يكن هذا الامتداد متاحًا.

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