V posledním videu jsme skončili s trochou zamotaného nepořádku. Vše v jednom bloku JavaScriptu jsme míchali získávání dat, zobrazení a obchodní logiku a šablonování. V tomto videu začneme tyto věci rozbíjet, abychom se dostali na cestu k organizovanějšímu, udržovatelnějšímu a srozumitelnějšímu kódu. Velkou část tvoří šablonování.
Vezměte si č. 1 v našem šablonovém dobrodružství s řídítky. Řídítka mají chytrý přístup v tom, že HTML pro šablonu je doslova vložen do HTML. Používáte speciální značku. Dělá to pěkné vytváření, protože se můžeme dostat pryč od neohrabanosti zřetězení řetězců (všechny ty uvozovky a plusy) a získat pěkné zvýraznění syntaxe pro HTML, které váš editor poskytuje. Naše šablona nakonec vypadala takto:
((movieTitle))
((movieDirector))
Všimněte si zvláštního typeatributu na značce skriptu. To zabrání provedení této značky. Nakonec řídítka jen vytrhnou vnitřnosti této značky a přemění ji na funkci šablony. Docela chytrý způsob, jak to opravdu zvládnout.
Tyto kousky jako ((movieTitle))jsou důležité součásti. Nakonec předáme objekt šablonové funkci, která se vytvoří, a vlastnosti tohoto objektu odpovídají těmto zástupným bitům. Řídítka se pravděpodobně nazývají řídítka, protože ty zástupné bity jsou zabalené do složených závorek, které vypadají trochu jako řídítka shora.
Po jednoduchém výukovém programu na webu Handlebars vytvoříme naši šablonovací funkci takto:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Pak v rámci naší forsmyčky zavoláme naši novou funkci šablon s objektem (kontextem), který obsahuje jeden film. HTML bude vrácen a my ho připojíme na stránku.
var html = template(data.movies(i)); $("#movies").append(html);Také vezmeme šablonu v tomto videu a natočíme ji na jiné pero. To jen znamená, jak byste pravděpodobně rozbili svůj vlastní kód ve skutečném projektu. Šablona by téměř jistě byla „zahrnutím“ nějakého druhu.
Zde jsme skončili:
Podívejte se na Pen mdCjJ od Chris Coyier (@chriscoyier) na CodePen
Udělali jsme zde několik dobrých kroků směrem k lepšímu kódu, ale máme ještě co do činění s tím, aby byl dokonale čistý.