此标签扩展了
{% partial %}Twig 标签。
{% ajaxPartial %} 标签在页面上渲染局部内容,并支持 AJAX 处理器、自更新和短更新语法。这通常被称为自更新局部。
{% ajaxPartial "contact-form" %}局部内容仅在首次加载时用特定的 HTML 标签包裹。通过 AJAX 进行后续的局部更新时不包含该包裹标签。
<div data-ajax-partial="contact-form">
... 内容在此 ...
</div>使用 AJAX 局部时,您不再需要指定选择器来更新它。在使用 data-request-update 属性时,只需将 true 传递给 数据属性 API 即可。
<button
data-request="onRefresh"
data-request-update="{ contact-form: true }">
刷新
</button>您还可以使用 _self 作为局部名称,从局部内部更新它。
<button
data-request="onRefresh"
data-request-update="{ _self: true }">
刷新
</button>您还可以传递 ^ 符号来前置内容,或传递 @ 符号来追加内容到容器,而不是替换它。
<button
data-request="onRefresh"
data-request-update="{ _self: '@' }">
追加
</button>{% ajaxPartial %} 接受一个 lazy 属性,该属性会将内容的渲染推迟到页面加载完成之后。在以下示例中,posts 局部将在页面加载完成后更新。
{% ajaxPartial 'posts' lazy %}lazy body 属性允许在加载之前指定初始内容,后跟 {% endpartial %} 标签。
{% ajaxPartial 'posts' lazy body %}
<p>正在加载文章...</p>
{% endpartial %}重要的是,{% ajaxPartial lazy %} 标签不会立即渲染局部。相反,它会输出一些初始内容,其中包含一个用于 轮询请求 的 data-auto-submit 数据属性。此属性在页面加载完成后执行 AJAX 请求以加载局部内容。为了防止无限循环,后续的局部更新中不包含此属性。
以下是首次页面加载时在浏览器中的显示方式:
<div
data-request="onAjax"
data-request-update="{ _self: true }"
data-auto-submit>
<p>正在加载文章...</p>
</div>不要在你的局部中包含上述标记。
{% ajaxPartial lazy %}标签会自动为你包含它。
当从 AJAX 局部内部调用 AJAX 处理器时,会触发一个捕获页面生命周期(见下文),该生命周期允许在请求的局部中使用 AJAX 处理器。
以下示例展示了如何使用自更新局部提交一个简单的联系表单。
description = "自更新局部"<?
function onSubmitContactForm()
{
$this['submitted'] = true;
}
?>{% if submitted %}
<p>感谢您联系我们!</p>
{% endif %}
<button
data-request="onSubmitContactForm"
data-request-update="{ _self: true }">
提交
</button>使用 CMS 组件 的局部也将使其 AJAX 处理器可用。
[contactForm]<button
data-request="contactForm::onSubmit"
data-request-update="{ _self: true }">
提交
</button>当从 AJAX 局部调用处理器时,它会触发一个不同的生命周期,称为捕获生命周期。捕获生命周期会渲染整个页面,但它会将内容渲染到虚空(void)中。通过这种方式,页面会完全初始化,包括所有使用的局部和 AJAX 处理器。
由于它被视为一个完整的页面渲染,这意味着当使用 AJAX 局部处理器时,onRun 组件方法 可能会被调用。您可以使用 Request::ajax() 辅助方法 来确定请求是否作为 AJAX 请求的结果发生。