ajax更新组件 · October Cms 笔记

# ajax更新组件 ## ajax组件更新页面 ### 拉取部分更新 ajax请求返回后，将**mytime**部分呈现在`#myDiv`页面上的元素内 ``` <div id="myDiv">{% partial 'mytime' %}</div> ``` - 方法1、使用`data-request-update`属性返回 ```  <button data-request="onRefreshTime" data-request-update="mytime: '#myDiv'"> Go </button> ``` - 方法2、使用JavaScript API的`update`配置选项： ```  $.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' ``` ### 推送组件更新内容 - 推送的是操作的组件后的内容以下示例将使用在**mypartial**部分中找到的内容更新ID为**myDiv**的页面上的元素。该处理程序将调用呈现在PHP中的部分内容的方法。`onRefreshTime``renderPartial` ``` function onRefreshTime() { return [ '#myDiv' => $this->renderPartial('mypartial') ]; } ``` > \*\*注意：\*\*键名必须以标识符`#`或类`.`字符开头才能触发内容更新。 ### 后台将数据传递给组件 - 使用`$this[]`页面或布局内[PHP部分](https://octobercms.com/docs/cms/themes#php-section)。 - `$this->page[]`在[组件类](https://octobercms.com/docs/plugin/components#ajax-handlers)内部使用。 - 使用`$this->vars[]`在[后端区域](https://octobercms.com/docs/backend/controllers-ajax#ajax)。这些示例将为每种情况的一部分提供**结果**变量： ``` // 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在以下部分中访问此值： ```  {{ result }} ```