OctoberCMS开发入门教程 — AJAX页面局部刷新Updating partials

2018-01-15 429

OctoberCMS开发入门教程系列:

局部刷新基本使用
首先,在主题的partial目录里定义视图模板文件mytime.htm,内容如下:

{% if result %}
    当前时间戳:<span class="label label-success">{{ result }}</span>
{% endif %}

然后,在数据显示页面的PHP代码段中定义ajax处理方法

function onRefreshTime()
{
    $this['result'] = time();
}

并引入部分更新视图

{% partial 'mytime' %}

其中myDiv为局部刷新内容目标dom,mytime为模板视图文件mytime.htm

然后,在相关html元素标签定义data-request和data-request-update,如下:

<!-- Attributes API -->
<button data-request="onRefreshTime" 
data-request-update="mytime: '#myDiv'">刷新时间
</button>

当然,我们也可以使用JS来调用,如下:

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

更新定义

  • update定义格式为key:value,其中key为局部刷新视图,value为更新数据显示目标元素;
  • update支持同时更新多个,格式如:firstpartial: '#myDiv', secondpartial: '#otherDiv';
  • update的key如果存在斜线或者横线时必须用引号'ajax/mytime',如:'folder/mytime': '#myDiv', 'my-partial': '#myDiv';
  • update的value可以是jquery元素查询表达式,也可以是html元素对象,如:mytime: document.getElementById('myDiv')

后台推送局部更新

除了可以在前端页面定义update来刷新页面,我们还可以在后台使用renderPartial方法向前端页面推送局部更新视图内容,这样不需要在前端定义update了。代码如下:

function onRefreshTime()
{
    return [
        '#myDiv' => $this->renderPartial('mytime', ['result'=>time()])
    ];
}

局部更新视图变量传递 提供3种场景传递方式,分别是:

  • $this[] 在htm模板页面的PHP标签里
  • $this->page[] 在component组件类里
  • $this->vars[] 在控制器controller里 3种场景实例如下:
// 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!';

发表评论