프런트 엔드의 OctoberCMS Ajax 정렬

프런트 엔드의 OctoberCMS Ajax 정렬

프런트 엔드의 리스트를 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만 사용할 수 있는지)과 범위도 검토하고 있습니다.

부분 업데이트에 대해서는 알고 있지만, 배울 수 있는 작업 예가 필요합니다.컴포넌트 내 스코프의 베스트 프랙티스, 이것이 페이지 번호 부여에 영향을 줄지 여부, 1개의 컴포넌트에 복수의 파셜을 가지는 셋업을 구성하는 방법에 대해서는 알 수 없습니다.

핸들러에서 부분 업데이트를 가져오는 경우 속성 이름은 다음과 같습니다.

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

다음과 같이 여러 파셜을 사용할 수도 있습니다.

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

다른 방법은 Ajax 핸들러에서 부분 업데이트를 푸시하는 것입니다.이건 좀 더 깔끔하게 느껴지지만, 그냥 선호도의 문제일 뿐이에요.

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

자세한 내용은 공식 문서의 "Updating partials" 페이지를 참조하십시오.

로 변경하다default.htm한다면default.htm폴더에 있는 다음 바꾸기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>

언급URL : https://stackoverflow.com/questions/42934511/octobercms-ajax-sort-in-the-frontend