Próbuję dowiedzieć się o nowych zastosowaniach javascript jako języka serwera i języka funkcjonalnego. Kilka dni temu słyszałem o node.js i express framework. Potem zobaczyłem underscore.js jako zestaw funkcji narzędziowych. Widziałem to pytanie przy przepełnieniu stosu . Mówi, że możemy użyć underscore.js jako silnika szablonów. każdy zna dobre samouczki na temat korzystania z underscore.js do tworzenia szablonów, szczególnie dla biginnerów, którzy mają mniejsze doświadczenie z zaawansowanym javascript. Dzięki
262
Odpowiedzi:
Wszystko, co musisz wiedzieć o szablonie podkreślenia, znajduje się tutaj . Pamiętaj tylko o 3 rzeczach:
<% %>
- aby wykonać kod<%= %>
- aby wydrukować pewną wartość w szablonie<%- %>
- aby wydrukować niektóre wartości, które uciekł HTMLTo wszystko.
Prosty przykład:
następnie
tpl({foo: "blahblah"})
byłby renderowany do łańcucha<h1>Some text: blahblah</h1>
źródło
źródło
text/html
taktype="text/html"
kłamliwy, kłamstwa mogą powodować problemy. Lepiej byłoby z dokładnym typem, takim jaktext/x-underscore
.type="foo/bar"
ponieważ chcę, aby wszyscy wiedzieli, że to nie ma znaczenia, dopóki przeglądarka / serwer nie rozpoznaje i nie próbuje coś z tym zrobić. Ponieważ html nie jest rodzajem skryptu, czuję się dość bezpiecznie z tekstem / html (używa go John Resig) foo / bar również działa :)*/x-*
typy dla „wymyślonych” zastosowań, nie sądzę, że jest takitext/underscore
typ w oficjalnych rejestrach, więc używam,text/x-underscore
ponieważ jestem paranoikiem i naprawdę chcą mnie dopaść.W najprostszej formie możesz go użyć w następujący sposób:
Jeśli zamierzasz używać szablonu kilka razy, musisz go skompilować, aby był szybszy:
Osobiście wolę składnię stylu Wąsy. Możesz dostosować szablon znaczników tokenów, aby używać podwójnych nawiasów klamrowych:
źródło
interpolate
nie zadziałał, ale to_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };
Dokumentacja szablonów jest częściowa, obejrzałem źródło.
Funkcja _.template ma 3 argumenty:
Jeśli nie podano danych (lub null), funkcja renderowania zostanie zwrócona. Ma 1 argument:
W ustawieniach są 3 wzorce wyrażeń regularnych i 1 parametr statyczny:
Kod w sekcji oceny zostanie po prostu oceniony. Możesz dodać ciąg z tej sekcji za pomocą polecenia __p + = "mystring" do ocenianego szablonu, ale nie jest to zalecane (nie jest częścią interfejsu szablonów), zamiast tego użyj sekcji interpolacji. Ten typ sekcji służy do dodawania bloków, takich jak if lub for, do szablonu.
Wynik kodu w sekcji interpolacji zostanie dodany do ocenianego szablonu. Jeśli zwrócona zostanie wartość null, zostanie dodany pusty ciąg.
Ucieczka sekcja ucieka html z _.escape na wartości zwracanej danego kodu. Jest więc podobny do _.escape (kod) w sekcji interpolacji , ale ucieka \ znakami spacji, takimi jak \ n, zanim przekaże kod do _.escape . Nie wiem, dlaczego to takie ważne, jest w kodzie, ale działa dobrze z interpolacją i _.escape - która nie ucieka również przed spacjami - również.
Domyślnie parametr data jest przekazywany przez instrukcję with (data) {...} , ale tego rodzaju ocena jest znacznie wolniejsza niż ocena z nazwaną zmienną. Tak nazywania danych ze zmiennym parametrem jest czymś dobrym ...
Na przykład:
wyniki
Możesz znaleźć tutaj więcej przykładów korzystania z szablonu i zastąpienia ustawień domyślnych: http://underscorejs.org/#template
Wczytując szablon masz wiele opcji, ale na końcu zawsze musisz przekonwertować szablon na ciąg. Można podać go jako zwykłego łańcucha jak w przykładzie powyżej, lub można go załadować z tagu skrypt i użyć .html () funkcję jQuery, czy można załadować go z oddzielnego pliku z TPL wtyczki z require.js .
Inna opcja, aby zbudować drzewo dom lakoniczne zamiast szablonów.
źródło
Podaję bardzo prosty przykład
1)
Wynik byłby
2) To jest szablon
To jest HTML
To jest kod javascript, który zawiera obiekt Json i umieszczenie szablonu w HTML
źródło
z ekspresowym to takie proste. wystarczy użyć modułu konsolidacyjnego w węźle, aby go zainstalować:
następnie powinieneś zmienić domyślny silnik na szablon HTML tak:
zarejestruj silnik szablonu podkreślenia dla rozszerzenia HTML:
zrobione !
Teraz na przykład załaduj szablon o nazwie „index.html”:
Mam nadzieję, że to ci pomogło!
źródło
Chciałem podzielić się jeszcze jednym ważnym odkryciem.
użycie <% = zmienna => spowodowałoby powstanie luki w skryptach krzyżowych. Dlatego bezpieczniej jest używać zamiast tego <% - zmienna ->.
Musieliśmy zamienić <% = na <% - aby zapobiec atakom skryptowym między witrynami. Nie jestem pewien, czy będzie to miało wpływ na wydajność
źródło
Lodash jest również tym samym Najpierw napisz skrypt w następujący sposób:
Teraz napisz kilka prostych JS w następujący sposób:
Gdzie popoup to div, w której chcesz wygenerować stół
źródło