OctoberCMS Ajax在前端排序

Question

我正在寻找使用ajax排序前端列表的最佳实践.

所以我有一个循环遍历所有项目的组件.然后是带有复选框的侧边栏,使用Ajax进行过滤.每个复选框都是一个类别,并通过检查该过滤器进行过滤.

在我的组件default.htm我有

{% set items = __SELF__.items %}

<div class="col-md-12" id="results">
{% for item in items %}

<ul>
    <li>{{ item.title }} - {{ item.description }}</li>
</ul>


{% endfor %}   
</div>

和一个按钮,直到我让它切换到复选框.

<button class="btn btn-default"
data-request="onHandleForm"
data-request-update="#results">
Go

并在我的组件插件文件中

// Fetches everything
public function onRun() {

    $order = items::orderBy('id', 'asc');
    $this->items = $order->get();

}

function onHandleForm()
{

    // Fetch all of the items where category is 2 for test purposes
    $order = items::orderBy('id', 'desc')->where('category','2');
    $filter = $order->get();

    $this->page['items'] = $filter;

}

然而,我有部分未被发现的问题.以上是相当草率但我只是寻找刷新内容的最佳方法(使用多个部分来更新或只是一个div？)并处理范围.

我知道部分更新,但我需要一个工作示例来学习.我不知道组件中范围的最佳实践,这是否会影响分页,以及如何在一个组件中构建具有多个分区的设置.

Answer 1

如果您想从处理程序中提取部分更新，则属性名称应该是

data-request-update="resultsPartialName: '#results'"

您也可以像这样使用多个部分：

data-request-update="firstpartial: '#myDiv', secondpartial: '#otherDiv'"

另一种方法是从 ajax 处理程序推送部分更新。这对我来说感觉更干净一些，但这只是偏好问题。

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

更多信息请参见官方文档的更新部分页面。