HTML šablony v Javascriptu? Bez kódování na stránce?

Jsem webový člověk, který dělá převážně věci na straně serveru v Perlu a pomalu docházím k několika závěrům.

  • Je mnohem lepší dělat většinu kódu pomocí JavaScriptu a přehazovat data tam a zpět přes AJAX, než stisknout tlačítko Odeslat a znovu načíst většinou identickou stránku.
  • Mám rád jQuery, protože mám rád CSS a je zábavné spojovat dlouhé a děsivé definice.
  • Na těch šablonách něco je.

Chcete, aby vaše prvky HTML vypadaly jako vaše prvky HTML, a je snazší to definovat v HTML:

<div class="sidebar_elem">
     <a href=""> TEXT</a>
</div>

Pak je to stejné v Javascriptu nebo jQuery:

( '<div/>' )
     .attr('id' , 'sidebar_elem' + i )
     .addclass( 'sidebar_elem' )
     ;
( '<a/>' )
     .attr('href' , link_url )
     .appendTo( '#sidebar_elem' + i )
     ;

Tím chci říci, že již nejsem šablonovací agnostik, ale nevím, kterému šablonovacímu nástroji mám věřit. Podíval jsem se na některé šablonovací pluginy založené na jQuery, ale zatím jsem nebyl spokojený s žádným z nich. částečně proto, že ti, které jsem viděl, chtějí vložit všechen tento kód do samotné stránky, což porušuje mantru „Do souborů HTML jde pouze označení, do souborů CSS jde pouze styl, pouze kód jde do souborů JS“ .

Takže hledám šablonovací nástroj založený na Javascriptu, který by mi umožnil mít šablony v externím souboru, abych mohl mít jednu změnu šablony pokrývající řadu webových stránek. Pokud je to založené na jQuery, je to skvělé, musím se naučit méně věcí, ale není to překážka.

Odpověď

Co takhle EJS?

Příklad z jejich stránky:

“EJS kombinuje data a šablonu k vytvoření HTML.”

Údaje:

{title: 'Cleaning Supplies',  supplies: ['mop', 'broom', 'duster'] }

Šablona:

<ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>

Výsledek:

  • mop
  • koště
  • prachovka