AJAX更新Partials

当处理程序执行时，它可以通过推或拉来准备在页面上更新的partial，这可以使用一些提供的变量进行渲染。

拉取Partials更新

客户端浏览器可以在执行AJAX请求时请求从服务器更新partial，这被认为是拉取内容更新。以下代码在调用onRefreshTime 事件处理程序后，在页面上的#myDiv元素内部呈现mytime partial。

  1. <div id="myDiv">{% partial 'mytime' %}</div>

data attributes API使用data-request-update属性。

  1. <!-- 属性 API -->
  2. <button
  3.     data-request="onRefreshTime"
  4.     data-request-update="mytime: '#myDiv'">
  5.     Go
  6. </button>

JavaScript API使用update配置选项：

  1. <!-- JavaScript API -->
  2. $.request('onRefreshTime', {
  3.     update: { mytime: '#myDiv' }
  4. })

更新定义

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

  • 左侧(key) partial 名称
  • 右侧(value) 页面

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

  1. mypartial: '#myDiv'

多个partial用逗号隔开。

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

如果partial名称包含斜杠或破折号，那么在左边引用是很重要的。

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

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

  1. mypartial: document.getElementById('myDiv')

部分更新

相比之下，AJAX处理程序可以从服务器端将内容更新推送到客户端浏览器。为了推送更新，处理程序返回一个数组，其中key是要更新的HTML元素(使用简单的CSS选择器)，value是要更新的内容。

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

  1. function onRefreshTime()
  2. {
  3.     return [
  4.         '#myDiv' => $this->renderPartial('mypartial')
  5.     ];
  6. }

注意: 键名必须以标识符#或类.字符开头，以触发内容更新。(译者注：只用id或者class会不会扩展性不够高呢？)

将变量传递给partials

根据执行上下文，AJAX事件处理程序使变量可用于不同的partials。

这些示例将为每个上下文的部分partials结果变量：

//来自页面或布局PHP代码部分 $this[‘result’] = ‘Hello world!’;

//来自组件类 $this->page[‘result’] = ‘Hello world!’;

//来自后台控制器或者小部件 $this->vars[‘result’] = ‘Hello world!’;

然后可以使用partials中的Twig访问其值：

  1. <!-- Hello world! -->
  2. {{ result }}