Často se opakující html kód

Hauron

Zdravím,
snažím se přijít na to, jestli v Nette neexistuje nějaký postup pro vkládání opakujících se částí kódu. Například pokud na stránce využívám pomocí stylů a divů vytvořené „okno“ (okraje, lišta s nadpisem, vnitřní prostor pro informace) tak jsem nenašel jinou kmožnost než toto „okno“ pokaždé v šabloně znovu napsat. Není nějaká možnost, si podobný html kód někde nadefinovat a pak v šabloně použít něco jako

{okno 'Anketa'}

vypsání dat

{/okno}

{okno 'mail'}
vypsní něčeho dalšího
{/okno}

Takže by se mi na stránce vykreslili 2 „okna“ s jiným nadpisem a obsahem.

Fakt jsem se snažil najít jestli už se tu něco takového neřešilo, ale nezadařilo se ..... Tak jestli nějaký Guru ví ......

Editoval Hauron (1. 12. 2010 18:41)

mm-marek

co je špatně na

<div class='okno'>
	<span>Anketa</span>
</div>

? nebo asi nechápu co přesně chceš…

Hauron

Na tom samozřejmě není špatného nic, ale já bych dal přednost něčemu takovému :

<div style="margin: 5px; width: 400px; border-width: 3px; border-style: solid; border-color: lightgrey; float: left;">
<div style="height: 20px; background-color: orange; width: 100%; border-width: 0px 0px 3px 0px; border-style: solid; border-color: lightgrey;">
<b>	&nbsp;	&nbsp; ANKETA</b>
</div>
<div style="margin: 0px 0px 20px 0px;">

Rozdílná data

</div>
</div>

Samozřejmě pokud možno s možností měnit některé parametry ...... Samozřejmě Ctrel+C a Ctrl+V funguje, ale pokud by se to dalo zapsat jak jsem psal nazačátku, bylo by to hezčí a samotná definice by byla rychle měnitelná pro všecha použití ........

Vojtěch Dobeš

Něco podobného se tu řešilo pár dní nazpět:

buď si udělej komponentu (o něco složitější, ale v tomto případě asi nejvhodnější řešení)
makro include

šablona pohledu

{include './okno.latte', title => 'Anketa'}

a šablona okno.latte

<div class="window">
	<div class="window-title">{$title}</div>
	{* nějaký obsah *}
</div>

Obě 2 řešení se určitě potýkají s tím „nějakým obsahem“, vzhledem k němu se možná ukáže jako nejpraktičtější prostě trochu toho HTML kódu napsat znova, anebo (protože design formou „oken“ dává tušit, že pro to, aby šlo skutečně o nějaká „okna“, bude využit nejspíš i javascript) udělat celé to obalení, vytvoření okraje a lišty s nadpisem, právě javascriptem.

Editoval vojtech.dobes (1. 12. 2010 18:44)

Aurielle

Fuj, to CSS patří do externího souboru!

Hauron

S CSS souhlasím :D. Akorát škoda že to nevypadá že by byla použitelná nějaká z těch dvou možností bez docela složitého kódu. Vložení těch vnitřních dat nebude fungovat ani v jednom případě :( ...... Takže asi nezbude než to opravdu kopírovat.

mm-marek

pokud bude to css externě, tak to je to třikrát div class='' → tohle je zdaleka nejleplší varianta :) V zásadě nevím proč to nějak zásadně řešit, střílení vrabců kanónem (nebo kanónů vrabcem?)

No a pokud budeš trvat na variantě prvního příspěvku a psát tři divy je moc, dala by se vytvořit v šabloně proměnná s html obsahem začátku toho bloku, pak koncem a vypsat to takhle

{$blok_start} //$blok_start <div><div><div>
<b>nadpis</b>
text
{$blok_end}//$blok_end </div></div></div>

…osobně bych ale pak takovou šablonu upravovat (vidět) asi nechtěl :)

Editoval mm-marek (1. 12. 2010 20:27)

Hauron

Hmm, dobrá, děkuji za nápady. Ale nic z toho nevypadá jako ideál. Šlo spíš o to , že by se některé parametry daly nastavovat (podobně jako u komponent) ale s možností mít uvnitř vložený libovolný kontext. Pravda je že při psaní rozsáhlejší webové aplikace, která používá jednotné prostředí se „podobný“ kód může vyskytnout mockrát s minimem obměn.

Aurielle

Já osobně nemám v NB problém napsat během pár vteřin tohle:

<div class="panel">
	<h2>Content</h2>
	<div class="inner">
		<p>Lorem ipsum</p>
	</div>
</div>

Hauron

gmvasek napsal(a):

Já osobně nemám v NB problém napsat během pár vteřin tohle:
<div class="panel">
	<h2>Content</h2>
	<div class="inner">
		<p>Lorem ipsum</p>
	</div>
</div>

Hmm, teď mi k tomu dodej tlačítko na display:none; tlačítko na zmenšení aby zůstal jen nadpis ........... Případně mi „rychle“ udělej okýnko se zakulacenýma rohama ......

Jak tak koukám, tak podobnou věc tady nikdo moc neřeší, tak jsem asi fakt divnej :(

Editoval Hauron (1. 12. 2010 20:43)

Ondrej

Takova vec se resi vlastni komponentou.
V presenteru naplnis parametry komponenty $nadpis a $text a v sablone pak volas jeji render()

Hauron

JJ, to mě napadlo. Ale to celkem neřeší různý druhy obsahu (může to být text,menu, obrázek, .....)

Aurielle

Zakulacený rohy řeší CSS, tlačítko na skrytí řeší jQuery. Příklad, kód

arron

Hauron napsal(a):

S CSS souhlasím :D. Akorát škoda že to nevypadá že by byla použitelná nějaká z těch dvou možností bez docela složitého kódu. Vložení těch vnitřních dat nebude fungovat ani v jednom případě :( ...... Takže asi nezbude než to opravdu kopírovat.

Na tom reseni pres include sablony fakt nevidim zadny slozity kod (anebo jsem fakt slepej). A ano, komponenty, ktere opravdu neco umi mivaji v sobe i trochu kodu…

Hauron napsal(a):

Hmm, dobrá, děkuji za nápady. Ale nic z toho nevypadá jako ideál. Šlo spíš o to , že by se některé parametry daly nastavovat (podobně jako u komponent) ale s možností mít uvnitř vložený libovolný kontext. Pravda je že při psaní rozsáhlejší webové aplikace, která používá jednotné prostředí se „podobný“ kód může vyskytnout mockrát s minimem obměn.

Idealni na tohle bude asi opravdu komponenta…coz treba si udelat metodu render s parametry a pred volani te komponenty hodit blok {capture}, do nej dat ten obsah, co v te komponente ma byt a pak to predat te komponente…a kdyz nad tim tak premyslim, tak se to bude nechat udelat asi jednoduseji pres ten {include} na uplne stejnym principu…