W ostatnim filmie omówiliśmy tworzenie szablonów z kierownicą. Ale kierownica nie jest jedynym rozwiązaniem do tworzenia szablonów w okolicy. W tym filmie użyjemy szablonów dostępnych w Underscore.
Dlaczego? Jednym z powodów jest to, że możesz już używać funkcji Underscore w swoim projekcie. Jest to niezwykle popularna biblioteka, ponieważ podobnie jak jQuery zapewnia szereg przydatnych metod, które działają w różnych przeglądarkach. Jak mówią:
Jest to krawat pasujący do smokingu jQuery i szelek Backbone.js.
Jeśli już używasz Underscore, byłaby to duża zachęta do korzystania z szablonów.
Również w moich szybkich testach Handlebars 1.0.0 ma 14,2 KB spakowane i zminimalizowane, a Underscore 4,9 KB spakowane i zminimalizowane. Kierownica ma po prostu więcej funkcji (np. Komentowanie, pętle, ścieżki, logika itp.). W naszym prostym demo i tak nie potrzebujemy tych funkcji, więc nie jest to do końca uczciwe porównanie, ale cóż, dopiero się uczymy.
Zamiast mieć szablon w kodzie HTML, musimy zdefiniować szablony podkreślenia w JavaScript. Wracamy do konkatenacji ciągów.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compilednastępnie zamienia się w funkcję, którą możemy wywołać z naszym kontekstem obiektu danych i zwraca kod HTML wypełniony tymi danymi. Aby być wydajnym, połączymy zwracany kod HTML w jeden duży ciąg, abyśmy mogli tylko raz dołączyć go do DOM:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);W tym filmie wyodrębniliśmy również pobieranie danych. Stworzyliśmy źródło JSON i użyliśmy funkcji $ .getJSON () jQuery, aby je pobrać. Tak, jak prawdopodobnie musielibyśmy robić w „prawdziwym życiu”.
$.getJSON("/path/to/json.js", function(data) ( ));Nasza pętla for i taka, która opiera się na tych danych, trafia tam w wywołaniu zwrotnym. Lub, co bardziej prawdopodobne, wywołuje inną dobrze nazwaną funkcję, aby to obsłużyć, zachowując czystą separację.
Oto, gdzie skończyliśmy:
Zobacz Pen IpAdn autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Należy zauważyć, że LoDash jest w 100% kompatybilny z tym, co tutaj zrobiliśmy. Nie jestem do końca pewien, czy szablony LoDash są lepsze / szybsze / wolniejsze / gorsze niż Underscore, ale wymieniłem biblioteki i demo działało dobrze.