当处理程序执行时,它可能会准备在页面上更新的局部(无论是通过推送还是拉取),这些局部可以使用一些提供的变量进行渲染。
客户端浏览器在执行AJAX请求时,可能会请求服务器更新局部内容,这被认为是拉取内容更新。
使用 {% partial %} 标签,以下代码将 mytime 局部页面渲染到 #myDiv 元素在页面上调用 onRefreshTime 事件处理程序。
<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 部分 Twig 标签文章 以了解更多关于
{% ajaxPartial %}标签。
在某些情况下,例如 闪存消息,您可能希望在每个响应中包含特定的局部更新。要将更新定义与每个 AJAX 请求合并,请在页面的头部部分添加 ajax-request-update 元标签,并将 content 属性设置为一个更新定义。
<head>
<meta name="ajax-request-update" content="{ flash-messages: true }" />
</head>要更新内容的定义指定为一个类似 JSON 的对象,其中:
以下将请求使用 mypartial 内容更新 #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 选择器),值是要更新的内容。
键名必须以标识符
#或类选择器.字符开头,才能触发内容更新。
以下示例将使用在局部视图 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!';此值随后即可在 partial 中通过 Twig 访问:
<!-- Hello world! -->
{{ result }}