V posledním videu jsme zakryli šablonování pomocí řídítek. Řídítka však nejsou jediným templátním řešením v bloku. V tomto videu použijeme šablonování dostupné v Underscore.
Proč? Jedním z důvodů je, že ve svém projektu již možná používáte Underscore. Je to velmi populární knihovna, protože stejně jako jQuery poskytuje spoustu užitečných metod, které fungují napříč prohlížeči. Jak říkají:
Je to kravata, která jde spolu s jQuery's tux a podvazky Backbone.js.
Pokud již používáte Underscore, byla by to velká pobídka k jeho použití.
Také v mém rychlém testování je Handlebars 1.0.0 14,2 KB gzipován a minifikován a Underscore je 4,9 KB gzipován a minifikován. Řídítka mají jednoduše více funkcí (např. Komentování, smyčky, cesty, logiku atd.). V naší jednoduché ukázce tyto funkce stejně nepotřebujeme, takže to není úplně férové srovnání, ale dobře, jen se učíme.
Spíše než mít šablonu v HTML, musíme definovat šablony podtržítka v JavaScriptu. Vracíme se k nějakému řetězcovému zřetězení.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledpak se změní na funkci, kterou můžeme zavolat s kontextem našeho datového objektu, a vrátí HTML všechny vyplněné těmito daty. Abychom byli efektivní, spojíme HTML, které se vrací, do jednoho velkého řetězce, abychom jej mohli připojit k DOMu jen jednou:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);V tomto videu jsme také abstrahovali od získávání dat. Vytvořili jsme zdroj JSON a k jeho získání jsme použili funkci $ .getJSON () jQuery. Jako bychom to asi museli dělat ve „skutečném životě“.
$.getJSON("/path/to/json.js", function(data) ( ));Naše smyčka for a taková, která se spoléhá na tato data, jde do zpětného volání tam. Nebo pravděpodobněji zavolá nějakou jinou dobře pojmenovanou funkci, která to zvládne a udržuje věci čistě oddělené.
Zde jsme skončili:
Podívejte se na Pen IpAdn od Chrisa Coyiera (@chriscoyier) na CodePen
Je třeba poznamenat, že LoDash je 100% kompatibilní s tím, co jsme zde udělali. Nejsem si úplně jistý, jestli je šablonování LoDash lepší / rychlejší / pomalejší / horší než Underscore, ale vyměnil jsem knihovny a demo fungovalo dobře.