Denis Granec
Denis Granec

Total Avengers Developer

jComponent - Ako na vlastný komponent #2

jComponent - Ako na vlastný komponent #2

Séria Ako na vlastný komponent bude venovaná jComponentu. Ak neviete, čo je to jComponent, tak vám odporúčam článok od Petra Širku. V tejto časti si vytvoríme ďalší komponent - odpočet času. Naučíme sa využiť path a vytvoríme si callback.

Vytvoríme si komponent

Znovu pôjdeme cestou od jednoduchšieho k zložitejšiemu. Začneme tím, že si urobíme velice jednoduchý komponent, ktorý bude obsahovať iba setInterval s premennou. Toto by ste mali zvládnuť už z prvého dielu.

Teraz máme komponent. Môžme si niekde v HTML zadať

Dynamické menenie odpočtu - path

Išlo by to aj cez config alebo cez funkcie ktoré vyvolá SETTER. Ale my dnes použijeme path. Čo je to path? Path je vlastne cesta ku globálnej premennej. Úžasná vec je, že ak premenná neexistuje, tak ju vytvorí. Komponent potom sleduje zmeny na path. Path deklarujeme ako druhý parameter oddelený __ od názvu komponenty.

(Pre hlbšie pochopenie zápisu sa pozrieme do dokumentácie)

Sledujeme zmeny - path

Náš komponent už počúva zmeny na našej path. Teraz len musíme upraviť komponent tak, aby reagoval na zmeny na path. Na to nám slúži delegácia self.setter(value, path, type).

  • value - hodnota, ktorú naša premenná obsahuje
  • path - náš starý známy path
  • type - typ zmeny (0: init, 1: manually, 2: by input, 3: default )

Takže si upravíme náš komponent.

Takto nám to bude fungovať. Ale rovno si upravíme celý komponent.

Spustíme a... nič. Ešte musíme zapnúť odpočet a to tak, že nastavíme cez SET našej premenne hodnotu čiže SET('mynumber', 100).

Aktualizujeme hodnotu - path

Komponent to vlastne hotový. Len dôvod, pre ktorí sme sa rozhodli ísť cestou path, nám nefunguje. Toto isté sme mohli dosiahnúť aj cez config a reconfigure. Dôvod prečo sme chceli použiť path je ten, že hocikedy môžeme urobiť console.log(mynumber) a to nám vráti aktuálne číslo odpočtu. A presne toto nefunguje. Aby nám toto mohlo fungovať, musíme použiť self.set(value, [type]) (path sa nepíše). A rovno využijeme aj parameter type. Bude to vyzerať následovne

Komponent nám už náš path aktualizuje. Môžme si mimo komponentu logovať (alebo inak pracovať) s odpočtom. Napríklad skryť/zobraziť niečo cez data-bind. A to si môžme rovno ukázať. Pridáme si data-bind ktorý nám povie, či je číslo párne/sudé alebo nepárné/liché

Jednoduché, však?

Vyvoláme callback

Páčilo by sa mi, keby po skončení odpočtu sme dostali o tom informáciu. Áno. Teraz by to išlo krásne cez WATCH. No my to chceme zakomponovať priamo do komponenty. Na to nám slúži velice jednoduchá globálna funkcia EXEC. Úpravá nám zaberie iba okamih.

Hotovo. Zostáva nám už iba zmeniť HTML

To je všetko. Náš prvý druhý komponent je úspešne dokončený. Ani to nebolo tak zložité.

Na záver

V tomto dieli sme si vyskúšali urobiť trošku zložitejší komponent. Využili sme path, self.set a self.setter. Tento komponent by mohol obsahovať ešte kopu ďalší featur. Hneď mi napadá konfigurovateľný text, formátovanie na hodiny:minúty:sekundy, možnosť pozastaviť timer a spustiť ho atď atď... Sky is the limit. V ďalšiom dieli si urobíme komponent na accordion. Vyskúšame si zase iné vecičky z jComponentu a budeme sa hrať s HTML