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 ) ;
		...
	}
} ) ;