Denis Granec
Denis Granec

Total Avengers Developer

jComponent - Ako na vlastný komponent #3

jComponent - Ako na vlastný komponent #3

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 urobíme accordion. Zúročíme už naše vedomosti a na vrch pridamé novinku v podobe datasource. Môžme sa do toho pustiť.

Bojový plán - Premyslíme si komponent

Ha! Prvá zmena oproti minulému článku. Práve v tento okamih sa odohráva tá najväčšia vojna. Musíme si premyslieť ako vôbec bude fungovať ten komponent. Rád by som vedel, ktoré konkrétne accordion taby sú otvorené. Stačí array s indexami. A samozrejme by bolo super keby som nemusel vypisovať komponent stále v HTML ale mohol som tam šupnuť array a ten by sa o to postaral.

Základný komponent

Tento náš komponent už bude obsahovať aj CSS, takže si pridáme do štýlov tento kód

A začneme s tvorobu. Toto by ste mohli zvládnuť aj sami

Ako ste si mohli všimnúť, pribudla novinka self.nocompile(). Zabezpečí to, že jComponent pri vyhľadávaní (npr. data-bindov) preskočí vnútro komponentu. Lebo my s určitosťou vieme, že tam žiadny data-bind nebude.

Druhý zdroj - datasource

Dynamické data môžme vložiť cez PATH ale niekedy sa nám stane, že to nestačí. Alebo PATH používame na niečo iné. Vtedy je tu ešte jedna možnosť - datasource. Keď použijeme datasource, tak komponent začne sledovať danú cestu (rovnako ako PATH) a zmeny na nej. Datasource je vlastne WATCHer. Nevýhoda je, že komponent môže mať iba jeden datasource (okrem PATH). No nikdy nás to nelimitovalo. Nenarazili sme na prípad, kedy by bolo treba viacero datasource-ov. Pri použití datasource Využijeme aj metódu self.configure (je to jednoduchá metóda). Ale všetko krásne pochopíte na kóde:

No a teraz nám stačí už iba deklarovať komponent.

Vyskúšame, či nám to funguje. Do konzoly napíšeme SET('faq', 'Hello World');


Kde sa tu vzal (T)Angular?

Tangular je template engine. To je všetko. Fakt. Takto jednoduché to je. Ale aj tak vás odkážem na wiki lebo aj Tangular v sebe skrýva veľké veci. My si vystačíme s Tangular.compile. Táto funkcia nám zo stringu spraví funkciu do ktorej my potom pošleme iba objekt. Hodí sa pozrieť si aj sekundárny "model" ktorý využijeme aj my a volá sa repository. Čiže si do komponentu pridáme Tangular.compile.

Áno, je to neprehľadné. Áno, dal by sa použiť aj iní zápis. Ale ja (neviem ako Peter) mám na to malý trik, napíšem si najskôr celé HTML aj s premennými, podmienkami... A potom to iba zminifikujem do jedného riadka. Podstatné ale je, že teraz môžme konečne vyrenderovať naš accordion.

Renderovanie accordionu

Tu sa teraz odohráva celá mágia. Mágia kúzla zbavená.

Finálna fáza

V tento moment by v ideálnom svete bolo počuť hlášku FINISH HIM a ja by som urobil nejaké ultra kombo v štýle, že by som na ten komponent skočil a rozpučil ho. Holt, budeme si musieť vystačiť aj bez toho. Posledná vec ktorá nám chýba do celej skládačky je zobrazenie/skrytie po kliknutí. A ako sa presvedčíme, to nie je nič zložité.

Game Over

Toto je už vážne všetko. Máme vlastný komponent. Osobne si myslím, že tento náš komponent je už použiteľný. Pôvodne som chcel vysvetliť niečo iné ale to si necháme zase nabudúce. V ďalšej časti spravíme radio button ktorý bude vyzerať takto a takto. To aby ste mali predstavu, čo sa naučíme nabudúce. Mimo to pripravujem ďalšiu sériu v ktorej urobíme celú appku postavenú na Total.js a jComponente.

Download

V minulých častiach mi to prišlo ako hlúposť ale tentokrát sem dám celý script na stiahnutie accordion.html (5 KB)