当处理程序执行时,它可能会准备一些局部视图,这些局部视图通过推送或拉取在页面上更新,并可使用一些提供的变量进行渲染。
客户端浏览器在执行AJAX请求时,可能会请求从服务器更新局部内容,这被认为是拉取内容更新。
使用 {% partial %} 标签,以下代码在调用 onRefreshTime 事件处理程序 时,将 mytime 片段渲染到页面上的 #myDiv 元素内。
<div id="myDiv">
{% partial 'mytime' %}
</div>该 数据属性 API 使用了 data-request-update 属性。
<!-- Attributes API -->
<button
data-request="onRefreshTime"
data-request-update="{ mytime: '#myDiv' }">
Go
</button>该 JavaScript API 使用 update 配置选项:
// JavaScript API
oc.request('#mybutton', 'onRefreshTime', {
update: { mytime: '#myDiv' }
});该 {% ajaxPartial %} 标签 专门用于渲染 AJAX 局部视图。
{% ajaxPartial 'mytime' %}使用此标签时,内容会为你包装在一个容器中,这样你就可以仅通过名称来更新局部视图。只需传递 true 值,而不是容器选择器。
<button
data-request="onRefreshTime"
data-request-update="{ mytime: true }">
Go
</button>你也可以使用局部名称 _self 来从局部自身内部更新该局部。
{ _self: true }参阅 AJAX Partial Twig 标签文章 以深入了解
{% ajaxPartial %}标签。
在某些情况下,例如 闪现消息,您可能希望在每个响应中包含特定的部分更新。为了将更新定义与每个AJAX请求合并,添加 ajax-request-update 元标签在页面的 head 部分中,并将 content 属性设置为一个更新定义。
<head>
<meta name="ajax-request-update" content="{ flash-messages: true }" />
</head>要更新内容的定义被指定为一个类 JSON 对象,其中:
以下将请求更新 #myDiv 元素 使用 我的部分 内容。
{ mypartial: '#myDiv' }选择器必须以一个
#或.字符开头才能生效。
多个分部由逗号分隔。
{ firstpartial: '#myDiv', secondpartial: '#otherDiv' }如果部分名称包含斜杠或破折号,务必将左侧'加引号'。
{ 'folder/mypartial': '#myDiv', 'my-partial': '#myDiv' }目标元素将始终位于右侧,因为它在 JavaScript 中也可以是一个 HTML 元素。
{ 'folder/mypartial': document.getElementById('myDiv') }如果选择器字符串以 @ 符号开头,从服务器接收到的内容将会追加到该元素,而不是替换现有内容。
如果选择器字符串以 ^ 符号作为前缀,则内容将改为前置。
{ 'folder/append-partial': '@#myDiv' }
{ 'folder/prepend-partial': '^#myDiv' }或者,你可以将 data-ajax-update-mode 属性添加到目标元素。
<div id="myDiv" data-ajax-update-mode="append"></div>
<div id="myDiv" data-ajax-update-mode="prepend"></div>如果选择器字符串以 = 符号开头,那么你可以使用任何自定义 HTML 选择器来定位一个元素。
{ 'folder/append': '=[data-field-name="address"]' }相比之下,AJAX 处理器 可以将内容更新从服务器端推送到客户端浏览器。要推送更新,处理器会返回一个数组,其中键是要更新的 HTML 元素(使用简单的 CSS 选择器),值是要更新的内容。
The key name must start with an identifier
#or class.character to trigger a content update.
以下示例将使用在分部视图 mypartial 中找到的内容,更新页面上ID为 myDiv 的元素。onRefreshTime 处理器调用 renderPartial 方法,以在 PHP 中渲染分部视图内容。
function onRefreshTime()
{
return [
'#myDiv' => $this->renderPartial('mypartial')
];
}根据执行上下文,AJAX 事件处理程序 以不同的方式向局部视图提供变量。
这些示例将为每个上下文的局部视图提供 result 变量:
// From page or layout PHP code section
$this['result'] = 'Hello world!';
// From a component class
$this->page['result'] = 'Hello world!';
// From a backend controller or widget
$this->vars['result'] = 'Hello world!';此值随后即可通过 Twig 在分部视图中访问:
<!-- Hello world! -->
{{ result }}