37

我正在寻找使用 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？）并处理范围。

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

4

2 回答 2

1

改成default.htmif default.htmin a folder，然后替换data-request-update="foldername/default:'#results'"

<form data-request="{{ __SELF__ }}::onFormSubmit" data-request-validate>
<button class="btn btn-default" data-request="onHandleForm" data-request-update="default:'#results'">
</form>

于 2019-12-20T05:49:52.120 回答
1

如果要从处理程序中提取部分更新，则属性名称应为

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

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

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

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

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

官方文档的更新部分页面中的更多信息。

于 2017-04-07T05:29:33.150 回答