Nefunguje redrawControl v komponentě

@DavidMatějka Díky s includovanou šablonou to znám a napadlo mě, že by to mohlo být tak i v tomto případě, ale řekl jsem si, že asi ne, jelikož u klasické render() metody vše funguje jak má.

Každopádně díky.

Tvé vide jsem již před časem viděl.

@DavidMatějka

Tak z nějakého důvodu to nefunguje ani se snippetArea.

přesně podle videa a snippet se vůbec ze serveru neodešle.

@DavidMatějka OK tady:

sablona presenteru:

{block content}
	{control komponenta}
{/block}

{block scripts}
	{include parent}
	{snippetArea scriptsSA}
		{control komponenta:skripty}
	{/snippetArea}
{/block}

v presenteru mám klasický createComponentKomponenta() a vracím tam instanci komponenty.

Komponenta.php:

<?php

namespace App\Components;

use Nette\Application\UI\Control;

class MyComponent extends Control {

    public function render(){
        $this->template->render(__DIR__ . '/default.latte');
    }

    public function renderSkripty() {
        $this->template->render(__DIR__ . '/scripts.latte');
    }

    public function handleColorchange() {
		$this->getPresenter()->redrawControl('scriptsSA');
        $this->redrawControl('slider');
    }
}

no a pak scripts.latte:

<script n:snippet="slider">
	$('.slider').slider(); // Toto je externí knihovna na slider
</script>

toto udělá, že při vyvolání handle metody handleColorchange() se metoda zavolá, snippety se invalidují, ale do prohlížeče se nic neodešle.

Kdyby bylo potřeba ještě nějaký kód tak napiš.

Editoval Polki (12. 9. 2019 19:57)

@Polki Uvažuješ chybně – javascript musíš překreslovat tak, že ho zavoláš v JS a ne tak, že překreslíš nějaký snippet (ten JS kód se ti nevykoná po překreslení snippetu).

Používáš nette ajax knihovnu? Pokud ano, měl bys po success události znovu inicializovat slider nějak takhle:

<script>
$.nette.ext({
	success: function (payload) {
		$('.slider').slider();
	}
});
</script>

Edit: já uvažuju blbě :)

Editoval Phalanx (5. 10. 2019 19:58)

@Phalanx ehm jo vykoná. Když udělám to samé, ale místo:

{block scripts}
    {include parent}
    {snippetArea scriptsSA}
        {control komponenta:skripty}
    {/snippetArea}
{/block}

napíšu

{block scripts}
    {include parent}
    {snippet scriptsSA}
        {control komponenta:skripty}
    {/snippet}
{/block}

a invaliduju stejně jako výše, tak se to zavolá normálně se překreslí snippet a zavolá se ona funkce, která mi opět inicializuje js přesně, jak má. Je to způsobeno tím, že je to js příkaz ne funkce, takže to se vykoná vždy při překreslení. O tom je js. :)

Pravdu však máš v tom, že to, co jsi napsal je lepší řešení.

Problém je, že stejným způsobem řeším formuláře v modálních oknech a chci, aby se překreslila jen část uvnitř modálního okna, tedy formulář, ne celé modální okno, jelikož překreslení celého modálního okna si nerozumí s knihovnou jQueryModal…

Problém, co tu je je ten, že když je to obaleno ve snippetArea, aby se odeslal jen snippet uvnitř komponenty a její jiné metody render, tak se latte kód vykoná na straně serveru, to mám otestováno, ale do prohlížeče ten překreslený snippet vůbec nedorazí viz příspěvek výše (sleduju, co se posílá ze serveru na klienta).

EDIT 1: Ano, používám nette.ajax.js od Dobeše. :)
EDIT 2: Navíc často potřebuji aplikovat dané skripty jen na onu překreslenou komponentu a nikde jinde. Například, když skript nastavuje pro komponentu nějaký časovač, po kterém spustí událost. V takovém případě by napsání js skriptu obecného a jednoduchého zavolání znamenalo, že pro všechny ostatní komponenty by se přidal další časovač a akce by se spouštěly jinak a nepravidelně. Tedy bych musel ten JS skript napsat a napsat k němu rozšíření, které jsi popisoval výše a v něm by se muselo zjišťovat, která komponenta vyvolala js událost, podle toho vykonat ten js kód jen pro danou komponentu atd.
Jednodužší mi prostě přijde, že ten js skript napíšu jednou, obalím ho do snippetu a ten invaliduju při překreslení komponnty, takže script ví přesně ke které komponentě má přidružit časovač.

Editoval Polki (5. 10. 2019 19:41)

@Polki to setování render method jako callback, kdy se spolíháš na to, že to je pak zavolaný defaultním renderem, mi nepřijde správný.

Nepomohlo by, vytvořit nadřazenou komponentu, nazvěme ji třeba CalendarRenderer, která obstará snippety a komponenta Calendar vyrenderuje text, kterej ji přijde shora?

Calendar

<?php

namespace App\Components\Calendar;

use Nette\Application\UI\Control;

class Calendar extends Control
{

	private $text;

    public function render(string $template = 'default'): void
	{
		$this->template->text = $this->text;
        $this->template->render(__DIR__ . "/$template.latte");
    }

	public function renderAnother(): void
	{
		$this->render('another');
	{

	public function setText(string $text): self
	{
		$this->text = $text;
		return $this;
	}
}

A potom nadřazená control.

CalendarRenderer:

<?php

namespace App\Components\Calendar;

use Nette\Application\UI\Control;

class CalendarRenderer extends Control
{

    public function render(): void
	{
        $this->template->render(__DIR__ . '/path/to/template.latte');
    }

    public function handleChange(): void
	{
        $this['calendar']->setText('another text');
		$this->redrawControl('another');
    }

	protected function createComponentCalendar(): Calendar
	{
		return (new Calendar())->setText('default text');
	}
}

Template:

{snippet default}
  {control calendar}
{snippet/}
{snippet another}
  {control calendar:another}
{snippet/}

Presenter template:

{control calendarRenderer}

@Polki Díváš se na to trochu špatně.

Na tý komponentě není vůbec nic záhadnýho. Je to kompozice dvou komponent, kde každá se stará i jinou část vykreslení dat. To je naprosto v pořádku. Snažit se za každou cenu dělat komponentu takovou, aby obsáhla všechno je špatně. Snaž se komponenty držet co nejjednodušší, úplně stejně jako modely, každá dělá pokud možno jednu věc a kompozicí dosáhneš výsledku.

To, že je nějaká komponenta tvz. „hloupá“, tzn. že shora přijme data a stará se jen o to, jak se ta data vykreslí a jiná, nadřazená komponenta se zas stará o to, jak se tam ty data dostanou, je krásnej příklad separation of concerns a velmi dobře se to pak udržuje a především taky testuje, což je z dlouhodobýho hlediska dobře.

Ta komponenta je znovupoužitelná, vždycky ji budeš používat přes CalendarRenderer a je jedno jestli v další komponentě nebo presenteru. Ta kompozice v sobě zapouzdřuje všechno, co pro je pro funkčnost potřeba.

@Polki Je to úplně stejnej princip, jako s tím košíkem. Proč bys z child komponenty volal parent komponentu, aby něco udělala? To nedává smysl.

Komponenta A obdrží data a vykreslí je. Komponenta B pošle data. To je celý, jestli to je pak ve snippetu, reaguje to na signál atd. to už jde přece mimo, to je implementační detail, kterej vůbec ta komponenta neopotřebuje znát.

Kromě toho, čím jsi zabil znovupoužitelnost? U tý Calendar komponenty máš prostě nějakej text a ta ona vykreslí a je jí úplně jedno, co a jak ji ten text pošle. Její public API umožňuje nasetovat hodnotu property $text, tím pádem ji můžeš použít naprosto kdekoliv.

@teekey99 Asi jsme se nepochopili.

Když je komponenta A CalendarRenderer, která má v sobě toto:

{snippet default}
  {control calendar}
{snippet/}
{snippet another}
  {control calendar:another}
{snippet/}

A v .latte souboru v komponentě calendar je signál, který má za úkol překreslit část komponenty calendar a její scripty, aby se aplikovaly znovu, tak v komponentě calendar v souboru default.latte bude toto např:

...
<a n:href="change!" class="ajax"></a>
...

Jenže tento signál může odkazovat pouze do komponenty calendar, ne do CalendarRenderer.

Jenže jelikož renderovací logika je v CalendarRenderer, což je rodič od Calendar, tak musím v calendar komponentě v handle metodě zavolat toto:

public handleChange() {
    ...
    $this->getParent()->redrawControl('scripts');
    ...
}

A tím je znovupoužitelnost úplně mrtvá, jelikož se Calendar stala závislá na předkovi a musí doufat, že předek je nastaven a že má v sobě snippet scripts atd.
Pokud se vykašlu na to, co jsem napsal, ale udělám si jak říkáš callback, který by měl být v každé komponentě, protože co kdyby se při nějakém signálu chtělo volat něco z rodiče, tak jsem na úplně tom samém problému, jelikož když prostě nikdo ten callback nenaplní, tak tam nic nebude očividně a tedy se nezavolá žádné překreslení a toto:

public handleChange() {
    ...
    $this->parentCallbacks();
    ...
}

nebude mít vůbec žádný efekt, jelikož pole ‚parentCallbacks‘ bude prázdné a jsem tam kde jsem byl…

Proto zastávám názor, že komponenta by se o své vlastní vykreslování a redraw při signálech měla starat sama. Od toho vlastně snad už od přírody má render metody a možnost volat ‚$this->redrawControl()‘.

Nebo se pletu?

Editoval Polki (18. 10. 2019 18:51)

Nicméně pořád platí že mi to přijde hezčí než to moje.

Takže díky za odpověď. :-)

Jistě že šlo. Ale jde o ten samý problém.

Jako udělat jde všechno. Otázka je jak by to bylo správně.

Jako nejde právě jen o skripty. Kdyby šlo jen o skripty, tak si na to napsat nějaký js Ajax rozšíření pro nette.ajax.js je easy, i když místo jednoduché věci jako druhá render metoda musíš psát spousty balastu, vracet nějaký identifikátor komponenty, aby bylo jasno která se má prekresli atp, ale to se pominout dá, že místo 15 řádku napíšeš 200.

Jenze ono jde v rámci té jedne logické komponenty o více součástí, které prostě patří k sobě. A komunikuji spolu. Ano, každá má jinou šablonu a vykresluje se v ní něco jiného. Ale jsou úzce spojeny jakože mají stejné signály, stejně akce, stejne kódy na pozadí prostě. A když se něco změní v jedné části musí se to změnit i v té druhé, ale jednotlivé šablony jsou v rodičovské šabloně možno vykreslit na jiných místech. Takže to nemůže být v jedné šabloně jedné render metody, jelikož by nastalo to, že by byly vykreslený ty části u sebe což je nežádoucí.

Zároveň když to rozdělí do více komponent, tak vlastně více komponent bude kromě render metody a šablony ten samý kód a tím pádem vzniká duplicita kódu a to obrovská.

Řešení je nějaká parent komponenta ve které se bude podle toho, co chci vykreslit switchovat v render metode šablona pomocí if, else, ale to je vlastně to řešení co jsem napsal já, akorát místo dlouhosahleho ifovani jsem zvolil metodu callbacku, který je efektivnější.

@Polki

Přiznám se, že už se v tom docela ztrácím. Nemůžu se zbavit dojmu, že máš prostě chybnej návrh toho, jak ty komponenty mají fungovat a jak mají být strukturovaný.

Jestli se potřebuješ zbavit duplicit ve dvou komponentách, tak udělej nějakou abstraktní nebo extrahuj společnou část do trait a každá komponenta už se bude starat jen o renderování příslušný template.

Tím to asi ukončim, protože, už dál nevím, jak bych poradil :)

Ahoj, uz je brzy rano, tak mi to uz moc nemysli ;-), ale ten prvni priklad mi moc nedava smysl. Po zavolani redrawControl() v komponente se vola render(), takze by ti to melo spadnout na chybu.

Ten druhy priklad uz mi dava vetsi smysl a pokud spravne chapu, co potrebujes, tak by to slo jeste vyresit pres eventy, pokud tedy nechces dedit a nebo mit vice komponent v kompozici. A i ta chybejici metoda render() v komponente by se tim vlastne dala osefovat :-), viz priklad. O preklesleni se pak, samozrejme, musi postarat nadrazena komponenta / presenter. Netvrdim, ze je to nejlepsi reseni, ale pres eventy je to IMHO o dost elegantnejsi nez volat parenta s predem danym nazvem snippetu, apod.

Kdyz bych tedy kod upravil nejak takhle, melo by ti to jet v ramci jedne komponenty…

Komponenta:

<?php

namespace App\Components;

use Nette\Application\UI\Control;

class MyComponent extends Control {

	public $onChange;

    public function renderA(){
        $this->template->render(__DIR__ . '/default.latte');
    }

    public function renderB() {
        $this->template->render(__DIR__ . '/scripts.latte');
    }

    public function handleColorchange() {
       $this->onChange();
    }
}

Sablona presenteru:

{block content}

{snippet a}
	{control komponenta:a}
{/snippet}

{snippet b}
	{control komponenta:b}
{/snippet}

{/block}

Presenter:

public function createComponentKomponenta() {
        $control = $this->komponentaFactory->create();

		$control->onChange[] = function () {
			if ($this->isAjax()) {
				$this->redrawControl('b');
				//$this->redrawControl('a'); bude fungovat taky


			}
		};

		return $control;
    }

@Polki Mel jsem na mysli uplne prvni prispevek.

Jinak, me tohle omezeni komponent taky vadi, pac mam taky rad komponenty, ktere zastresuji veskerou funkcionalitu a vice render method pouzivam dost casto.

Ad „starani“ se o komponentu: Mno, ja mam hrozne moc veci resenych pres eventy, v podstate vse napr. co se tyka interakce s uzivatelem jako flashmessage, redirecty, apod., nikdy primo v komponentach neresim a mam to osefovane v createComponent metode, kde komponentu pouzivam. Takze mam treba eventy u CRUDu onAdd, onEdit, onDelete, atp. a v kazdem presenteru se pak muze po vykonani akce chovat aplikace uplne jinak, poslat jine hlasky, atd. To, ze takove eventy existuji si samozrejme musi programator nestudovat a pak spravne pouzit, nebot jsou soucasti rozhrani komponenty ;-) Stejne jako ti napr. Nette formulare vyhazuji onSuccess.

A tu onChange property nebude plnit nejakej trouba, ale tvoje komponenta :-) Trouba se pak jen musi postarat, aby potom aplikace udelala to, co potrebuje, jakmile se ten event zavola.

Editoval Kori (20. 10. 2019 2:00)