Szablon to fragment kodu HTML, który należy umieścić na stronie. Często szablony są tworzone „po stronie serwera” - w tym sensie, że przychodzą do JavaScript w pełni uformowane i wystarczy je umieścić w DOM. Ale czasami jest to niewykonalne lub wymagałoby dodatkowej podróży w obie strony do serwera, która może być wolna. W takim przypadku idealne jest posiadanie szablonu bezpośrednio w JavaScript. Z pewnością możesz po prostu wykonać trochę konkatenacji ciągów, dodając razem fragmenty kodu HTML i danych, aż uzyskasz szablon, którego potrzebujesz. Ale to prawdopodobnie nie jest idealne, ponieważ nie rozdziela kwestii dotyczących danych i szablonu. Prawdziwe szablony JavaScript mogą tutaj pomóc.
W tym screencastie omówimy podstawowe „dlaczego” tworzenia szablonów JavaScript, a następnie szczegółowo omówimy prosty przykład tego, jak to się robi w Underscore.js. Następnie omówimy inne alternatywy.
Próbny
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);Zobacz Pen% = penName%> autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Spinki do mankietów
- Podstawowe demo na CodePen
- Underscore.js Templating
- NetTuts: najlepsze praktyki podczas pracy z szablonami JavaScript
- MDN: szablony JavaScript
- John Resig: JavaScript Micro-Templating
- James Padolsey: Prosta interpretacja