更新部分

• 拉取部分更新
  • 更新定义
  • 附加和前置内容
• 推送部分更新
• 将变量传递给部分
• 在 partials 中处理 JavaScript

当处理程序执行时，它可能会准备在页面上更新的部分，无论是通过推送还是拉取，都可以使用一些提供的变量来呈现。

#拉取部分更新

客户端浏览器在执行 AJAX 请求时可能会向服务器请求更新部分内容，这被认为拉动内容更新.以下代码呈现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
$.request('onRefreshTime', {
    update: { mytime: '#myDiv' }
})

#更新定义

应更新内容的定义被指定为类似 JSON 的对象，其中：

• 左侧（键）是部分名称
• 右侧（值）是目标元素 更新

以下将要求更新#myDiv 元素与mypartial 内容。

mypartial: '#myDiv'

多个部分以逗号分隔。

firstpartial: '#myDiv', secondpartial: '#otherDiv'

如果部分名称包含斜杠或破折号，请务必“引用”左侧。

'folder/mypartial': '#myDiv', 'my-partial': '#myDiv'

目标元素将始终位于右侧，因为它也可以是 JavaScript 中的 HTML 元素。

mypartial: document.getElementById('myDiv')

#附加和前置内容

如果选择器字符串前面有@ 符号，从服务器接收到的内容将附加到元素，而不是替换现有内容。

'folder/append': '@#myDiv'

如果选择器字符串前面有^ 符号，内容将被添加到前面。

'folder/append': '^#myDiv'

#推送部分更新

比较，AJAX 处理程序 能推送内容更新 从服务器端到客户端浏览器。要推送更新，处理程序返回一个数组，其中键是要更新的 HTML 元素（使用简单的 CSS 选择器），值是要更新的内容。

以下示例将使用 id 更新页面上的元素myDiv 使用在部分中找到的内容mypartial.这onRefreshTime 处理程序调用renderPartial 在 PHP 中呈现部分内容的方法。

function onRefreshTime()
{
    return [
        '#myDiv' => $this->renderPartial('mypartial')
    ];
}

NOTE: 键名必须以标识符开头# 或类. 触发内容更新的字符。

#将变量传递给部分

根据执行上下文，一个AJAX 事件处理程序 使变量以不同方式可用于部分。

• 使用$this[] 在页面或布局内PHP 部分.
• 使用$this->page[] 里面一个组件类.
• 使用$this->vars[] 在里面后端区域.

这些例子将提供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 }}

#在 partials 中处理 JavaScript

AJAX 框架通过修改innerHTML 正在更新的部分的属性。由于大多数浏览器中实施的安全措施，没有<script> 以这种方式编写的标签将执行。这意味着您不能嵌入<script> 部分中的标签。

如果你想让 JavaScript 在加载后操作你的部分，你应该添加一个外部 JavaScript 文件，通过你的控制器或小部件通过addJs() 方法并监听 AJAX 请求完成时触发的事件。

根据您是否使用原件，这将略有不同AJAX框架 或使用Snowboard.

#jQuery 示例

(function ($) {
    $(document).on('render', function () {
        // ... Your code to manipulate the partial
    });
})(jQuery);

#滑雪板示例

Snowboard.on('ajaxDone', () => {
    // ... Your code to manipulate the partial
});

NOTE: 上面的两个例子都会触发any AJAX 请求正在完成。您必须优化您的代码以专注于您希望定位的特定部分，例如，检查具有 ID 或类的特定元素是否存在。您还可以使用AJAX 框架 JS API 或者滑雪板 JS API 附加到特定元素。