text Nette：Ajaxovéovládáníkomponenty

Posted 2021-05-02

# Nette ajaxové komponenty a snippety

## Instalace
 1. Nette sandbox: https://github.com/nette/sandbox
 2. Nette ajax: https://github.com/vojtech-dobes/nette.ajax.js
 3. `nette.ajax.js` a `spinner.ajax.js` přidáme do šablony `@layout.latte`
 4. Nahradíme soubory HomepagePresenteru
 5. Někam (např. `app/components`) umístíme komponentu

{* HomepagePresenter:default *}
{block content}
{control com}

<h4>Presenter</h4>
<p>Čas: {$time|date:'%H:%M:%S'}</p>
<p>
| <a n:href="refresh!" class="ajax">Obnov komponentu</a> 
| <a n:href="refreshDelay!" class="ajax">Obnov komponentu (čeká 3s)</a>  
| </p>

<?php
class HomepagePresenter extends BasePresenter
{
    public function renderDefault()
    {
        $this->template->time = date(DATE_RFC822);
    }

    public function handleRefresh()
    {
         if( $this->isAjax() ) {
            $this['com']->invalidateControl();
        } else {
            $this->redirect('this');
        }
    }
    
    public function handleRefreshDelay()
    {
        if( $this->isAjax() ) {
            sleep(4);
            $this['com']->invalidateControl();
        } else {
            $this->redirect('this');
        }
    }

    protected function createComponentCom()
    {
        return new Com();
    }
}

<?php
/**
 * Componenta Com
 */
class Com extends Nette\Application\UI\Control
{
    public function render()
    {
        $this->template->setFile(__DIR__ . '/Com.latte');
        $this->template->time = date(DATE_RFC822);
        $this->template->render();
    }

    public function handleRefresh()
    {
        if( $this->parent->isAjax() ) {
            $this->invalidateControl('com');
        } else {
            // redirect může jen presenter, nikoliv komponenta
            $this->parent->redirect('this');
        }
    }
}

{* Component template *}
<div style="border-style: solid; border-width: 1px;">
<h4>Komponenta</h4>

<p>Jméno komponenty: {$control->name}</p>
{snippet com}
<p>Čas vykreslení:{$time|date:'%H:%M:%S'}</p>
{/snippet}
<p><a n:href="refresh!" class="ajax">REFRESH (invalidování)</a></p>
</div>