filterfields - OctoberCMS Ajax Sort en el frontend

octobercms data handler

Question

Estoy buscando las mejores prácticas para ordenar una lista en el frontend usando ajax.

Así que tengo un componente que recorre todos los elementos. Luego, una barra lateral con casillas de verificación para filtrar utilizando Ajax. Cada casilla de verificación será una categoría y se filtrará en vivo al verificar ese filtro.

En mi componente default.htm tengo

{% 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>

y un botón hasta que lo haga funcionar para cambiar a casillas de verificación.

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

y en mi archivo de componentes

// 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;

}

Sin embargo, tengo problemas con lo parcial que no se encuentra. Lo anterior es bastante descuidado, pero estoy buscando la mejor manera de actualizar el contenido (¿usar parciales múltiples para actualizar o solo un div?) Y también tratar con el alcance.

Sé de la actualización parcial pero necesito un ejemplo práctico para aprender. No conozco las mejores prácticas para el alcance de un componente, si esto afectará o no a la paginación y cómo estructurar una configuración con múltiples parciales en un componente.

Answer 1

Si desea obtener las actualizaciones parciales del controlador, entonces el nombre del atributo debe ser

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

Puedes usar múltiples parciales también como este:

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

La otra forma de hacerlo es enviar las actualizaciones parciales desde el controlador ajax. Esto me parece un poco más limpio, pero es solo una cuestión de preferencia.

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

Más información en la página de Actualización de parciales de la documentación oficial.