nette.ajax.js

Nette 프레임워크의 경우

AJAX용 유연한 유틸리티 스크립트. 스니펫, 리디렉션 등을 지원합니다.

특허

MIT

종속성

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() 호출을 포함하고 이를 사용자 정의 콜백으로 연결될 수 있는 여러 이벤트로 확장합니다. 연관된 콜백 세트를 확장 이라고 합니다. 스니펫 처리, Escape 로 실행 중인 요청을 취소하는 기능... 이 모든 기능은 확장 형식으로 구현됩니다. 확장 등록은 다음과 같습니다.

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

첫 번째 인수는 이름입니다. 선택 사항입니다.

두 번째 인수는 이벤트 이름에 해당하는 키가 있는 콜백의 해시여야 합니다. 다음 이벤트를 사용할 수 있습니다.

이름	인수	설명
init		$.nette.init(); 부르다.
load	requestHandler	아약스화를 포함해야 합니다. 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	Ctrl , Alt 또는 Shift 키가 없는 클릭/제출, 로컬 링크 및 유효한 양식 제출로 아약스화를 제한합니다.
forms	[type=image] 입력에서 모든 데이터, 클릭한 버튼 이름 및 클릭 좌표가 포함된 양식 제출에 대한 지원을 추가합니다.
snippets	응답으로 snippets 배열로 DOM을 업데이트합니다(Latte 조각의 기본 Nette 처리).
redirect	다른 URL로 리디렉션을 실행합니다(presener에서 $this->redirect() 호출될 때). history 확장으로 대체될 수 있습니다.
unique	동시에 요청만 계속 실행됩니다.
abort	사용자가 Esc 키를 눌러 실행 중인 요청을 중단할 수 있습니다.
init	기본 아약스화.

유용한 트릭

이러한 모든 특수 기능은 모든 기본 확장이 켜져 있을 것으로 예상합니다.

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() 호출하여 다른 확장의 컨텍스트를 얻을 수 있습니다. 두 번째 인수로 true 추가하면 해당 확장을 사용할 수 없으면 스크립트가 실패합니다.

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