Invalidace komponenty pomoci JS

tom

Ahojte, mam na strance komponenty vytvorene pomoci multiplieru. Potom v JS na strance, kde ty komponenty jsou, mam

            const handleChange = {link changePolozku!}

            $.nette.ajax({
                type: 'GET',
                url: handleChange,
                dataType: 'json',
                data: jsonString,
                success: function (data) {
                },
                error: function (e) {
                    console.log(e);
                }
            });

coz mi ale hleda tu metodu v presenteru. Jde timto zpusobem zavolat tu metodu co je v komponente?

dakur

Pokud to máš v šabloně komponenty, bude to volat signál komponenty, pokud to máš v šabloně presenteru, bude to volat signál presenteru – tak signály fungují.

Je nějaký důvod, proč ten skript nemáš v šabloně komponenty?

tom

dakur napsal(a):

Pokud to máš v šabloně komponenty, bude to volat signál komponenty, pokud to máš v šabloně presenteru, bude to volat signál presenteru – tak signály fungují.

Je nějaký důvod, proč ten skript nemáš v šabloně komponenty?

ja ho tam mam ale nevola se prave … mrknu jeste na ten odkaz co jsi posilal

dakur

Tohle by mohlo být ono: https://doc.nette.org/…eating-links#…

V komponentě nefunguje nic než signály, proto není třeba vykřičník. Nevím ale, jestli se to s ním chová jinak nebo ne.

Editoval dakur (13. 7. 2023 9:57)

tom

dakur napsal(a):

Tohle by mohlo být ono: https://doc.nette.org/…eating-links#…

V komponentě nefunguje nic než signály, proto není třeba vykřičník. Nevím ale, jestli se to s ním chová jinak nebo ne.

ve strance, kde ty komponenty jsou vykreslene mam script

<script defer type="text/javascript">
    $(document).ready(function () {
		$('.element').keydown(function (e) {
            const handleChangeSomething = {link changeItem!}

            $.nette.ajax({
                type: 'GET',
                url: handleChangeSomething ,
                dataType: 'json',
                success: function (data) {
                    console.log('changed');
                },
                error: function (e) {
                    console.log(e);
                }
            });
		}
    });
</script>

a v komponente kterych je na te strance vice pomoci multiplieru tak v kazde z nich je metoda

    public function handleChangeItem()
    {
		...
	}

ale bohuzel ten javascript ji stale nezavola. Melo by to timto zpusobem fungovat, jen mam nekde chybku nebo na to jdu uplne celkove spatne? Rikam si, jak vlastne ten script pozna ze ktere komponenty tu metodu mam zavolat. Jestli neni lepsi zavolat nejakou metodu v presenteru a potom z ni invalidovat tu konkretni komponentu … nejak

MajklNajt

podľa mňa ten JS nemáš v šablóne komponenty, ako písal @dakur – pozri sa do vygenerovaného kódu tohto riadku const handleChangeSomething = {link changeItem!}

Editoval MajklNajt (13. 7. 2023 10:26)

dakur

Bez toho vykřičníku jsi zkoušel? Podívej se taky do devtools, co to vygeneruje za odkaz (co v té proměnné handleChangeSomething reálně po vykreslení stránky vlastně je).

stepos2

To nemůže fungovat. Pokud chceš z presenteru volat signál v komponentě, musíš tam dát název té komponenty {link jmenoKomponenty-changeItem!}. Pokud je komponenta vytvořená přes multiplier, musí tam být i identifikátor toho konkrétního prvku {link jmenoKomponenty-5-changeItem!}. Nejlepší je to nedělat a volat signály komponent jen z komponent.

Pokud je prvek .element součást šablony komponenty, ulož si do data atibutu toho prvku odkaz na signál a použij ho v JS.

<div class="element" data-change-item-url="{link changeItem!}">
...
</div>

$('.element').keydown(function (e) {
	const handleChangeSomething = $(this).data('change-item-url');
	...
});

Editoval stepos2 (13. 7. 2023 10:37)

tom

zkusim to predelat dik. dam pak vedet.

tom

stepos2 napsal(a):

To nemůže fungovat. Pokud chceš z presenteru volat signál v komponentě, musíš tam dát název té komponenty {link jmenoKomponenty-changeItem!}. Pokud je komponenta vytvořená přes multiplier, musí tam být i identifikátor toho konkrétního prvku {link jmenoKomponenty-5-changeItem!}. Nejlepší je to nedělat a volat signály komponent jen z komponent.

Pokud je prvek .element součást šablony komponenty, ulož si do data atibutu toho prvku odkaz na signál a použij ho v JS.
<div class="element" data-change-item-url="{link changeItem!}">
...
</div>
$('.element').keydown(function (e) {
	const handleChangeSomething = $(this).data('change-item-url');
	...
});

Uz se mi to vola, super, to pomohlo. Jen bych jeste poprosil o radu a paramatrama. Ta url co nastavuju v tom data-change-item-url vypada nejak tak

/?do=kompomenta-subkomponenta-10078-changeItem&id=10

a v JS pak mam

            $.nette.ajax({
                type: 'GET',
                url: handleChangeItem,
                dataType: 'json',
                success: function (data) {
                    console.log('changed');
                },
                error: function (e) {
                    console.log(e);
                }
            });

kdyz v te komponente ale dumpnu parametry, tak tam nejsou … muzes mi prosim jeste napsat jak pouzivas tu cast s $.nette.ajax ?

Dik

stepos2

V nette.ajax problém nebude, jaké parametry by ta komponenta měla dumpnout? id je parametr presenteru a v {link changeItem!} do komponenty žádý parametr neposíláš.

tom

v networku prohlizece vidim ze se ta spravna metoda vola, ale vyhazuje mi to NS_BINDING_ABORTED …

tom

stepos2 napsal(a):

V nette.ajax problém nebude, jaké parametry by ta komponenta měla dumpnout? id je parametr presenteru a v {link changeItem!} do komponenty žádý parametr neposíláš.

a jak se prosim ty parametry spravne predavaji? diky

stepos2

Ideálně přes konstruktor komponenty.

Presenter:

use Nette\Application\UI\Multiplier;

class HomePresenter extends Nette\Application\UI\Presenter
{
	public function __construct(
		private ItemControlFactory $itemControlFactory,
	) {}

	protected function createComponentItem(): Multiplier
	{
		return new Multiplier(function ($id): ItemControl {
			return $this->itemControlFactory->create($id);
		});
	}
}

Továrna (tohle se registruje do neonu):

interface ItemControlFactory
{
	function create($id): ItemControl;
}

Komponenta

class ItemControl extends Nette\Application\UI\Control
{
	public function __construct(
		private $id,
	) {}

	public function handleChangeItem(): void
	{
		dump($this->id);
	}
}