Zalecana biblioteka szablonów JavaScript HTML dla JQuery? [Zamknięte]


89

Jakieś sugestie dotyczące biblioteki szablonów HTML, która będzie dobrze współpracować z JQuery? Googlowanie pojawia się w wielu bibliotekach, ale nie jestem pewien, czy istnieje dobrze rozpoznawalna biblioteka, która przetrwałaby próbę czasu.


21
Powiedzmy, że przywracasz obiekt json ze 100 rekordami. Każdy rekord musi generować ten sam fragment html. Po prostu pomaga użyć szablonu niż generowanie znaczników w js. Pozwala projektantowi na zaprojektowanie go również zamiast znacznika znajdującego się wewnątrz ciągu w funkcji js
redsquare

3
@cletus - ponieważ łatwiej jest użyć szablonu w formacie html niż łańcucha załączników
Andrey

2
Skorzystaj z tego porównania perf, aby pomóc Ci dokonać
AM

Odpowiedzi:


58

Cóż, szczerze mówiąc, tworzenie szablonów po stronie klienta jest obecnie bardzo popularne, ale niezła dżungla.

najbardziej popularne są, jak sądzę,:

  • pure : Używa tylko js, ​​a nie własnej „składni”
  • wąsy : całkiem stabilne i ładne słyszałem.
  • jqote2 : niezwykle szybki według jsperfs
  • szablony jquery (przestarzałe):

jest wiele innych, ale musisz je przetestować, aby zobaczyć, co najbardziej Ci odpowiada i odpowiada Twojemu stylowi projektu.

Osobiście mam problem z dodaniem nowej składni i zestawu logiki ( mieszanie logiki i szablonu, cześć ?? ) i przeszedłem na czysty js. Każdy z moich szablonów jest przechowywany we własnym pliku html (./usersTable.row.html). Używam szablonów tylko podczas AJAX-u treści i mam kilka plików js "logiki", jeden dla tabel, jeden dla div, jeden dla list. ani nawet jednego dla opcji select (gdzie używam innej metody).

Za każdym razem, gdy próbowałem zrobić coś bardziej złożonego, stwierdzałem, że kod jest mniej przejrzysty i stabilizacja zajmuje mi więcej czasu niż robienie tego w „stary” sposób. Logika w szablonie jest moim zdaniem kompletnym bezsensem, a dodanie własnej składni dodaje tylko bardzo trudne do śledzenia błędy.


14

jTemplates

silnik szablonów dla JavaScript.

Wtyczka do jQuery ...

Cechy:

  • 100% w JavaScript
  • prekompilator
  • Obsługa formatu JSON
  • Pracuj z Ajaxem
  • Zezwalaj na użycie kodu JavaScript w szablonie
  • Pozwól budować kaskadowe szablony
  • Pozwól definiować parametry w szablonach
  • Odśwież na żywo! - automatyczna aktualizacja treści z serwera ...

8

Istnieje uzasadnione dokument dyskusja na ten temat tutaj , która obejmuje szereg narzędzi szablonów. Nie jest to jednak specyficzne dla jQuery.


5

Wtyczka jQuery Templates stworzona przez Microsoft i zaakceptowana jako oficjalna wtyczka jQuery.

Ale pamiętaj , że jest teraz przestarzały.


13
i „przestarzałe” od. Rozwój został zatrzymany, a to nie wyjdzie z wersji beta. facet ms i zespół jquery-ui pracują nad nowym szablonem, opartym na JSRender thou;)
roselan

Hę, bummer - używam go w całej mojej aplikacji internetowej :( Ale dzięki za wskazówkę! Czy masz link do nadchodzącego silnika szablonów, o którym wspomniałeś?
Andrey

1
jeśli wszystko pójdzie dobrze, jsrender by boris moore znajdzie drogę do jquery-ui. Chyba nie ma co się spieszyć;)
roselan

1
Zaimplementowałem jsRender w projekcie i jest po prostu niesamowity. Warto to sprawdzić.
ASeale

4

Chciałbym sprawdzić json2html , rezygnuje z pisania fragmentów kodu HTML i zamiast tego polega na transformacjach JSON, aby przekonwertować tablice obiektów JSON na listy nieustrukturyzowane. Bardzo szybki i wykorzystuje tworzenie DOM.


4
zastrzeżenie .. napisałem to. Ale warto sprawdzić;)
Chad Brown

3

Kilka lat temu zbudowałem IBDOM: http://ibdom.sf.net/ | Od grudnia 2009 obsługuje wiązanie jQuery, jeśli otrzymujesz je bezpośrednio z pnia.

$("#foo").injectWith(collectionOfJavaScriptObjects);

lub

$("#foo").injectWith(simpleJavaScriptObject);

Ponadto możesz teraz umieścić wszystkie znaczniki „data: propName” w atrybutach class = „data: propName inne nazwy klas”, dzięki czemu nie musisz zaśmiecać zawartości aplikacji tymi znacznikami.

Nie zaktualizowałem jeszcze części dokumentacji, aby odzwierciedlić moje ostatnie ulepszenia, ale mam różne wersje tego frameworka w produkcji od 2007 roku.

Do sceptyków tego pytania:

Kiedy Microsoft wynalazł w IE5 coś, co teraz znamy jako XmlHttpRequest i wzorzec „ajax”, częścią tego obietnicy była czysta wymiana danych między przeglądarką internetową a serwerem. Te dane miały zostać zawarte w XML, ponieważ w latach 1999/2000 XML był po prostu bardzo gorący. Poza pobieraniem dokumentu xml przez sieć z mechanizmem oddzwaniania, komponent MSXML ActiveX MS obsługiwał również wstępną implementację tego, co teraz znamy jako XSL-T i XPath.

Połączenie pobierania HTTP / XML, XPath i XSL-T dało programistom ogromną kreatywność w tworzeniu bogatych „dokumentów”, które zachowywały się jak „aplikacje”, wyłącznie wysyłając i, co ważniejsze, pobierając dane z serwera.

Dlaczego jest to przydatny wzór? To zależy od tego, jak skomplikowany jest twój interfejs użytkownika i jak bardzo zależy Ci na jego utrzymaniu.

Podczas budowania wizualnie bardzo bogatego, semantycznie zaznaczonego interfejsu z zaawansowanym CSS, ostatnią rzeczą, którą chcesz zrobić, jest podzielenie fragmentów znaczników na „mini-kontroler / widoki”, aby móc .innerHTML fragment dokumentu do głównego dokument, a oto dlaczego.

Jedną z kluczowych zasad pozwalających na zarządzanie zaawansowanym interfejsem użytkownika html / css jest zachowanie jego walidacji przynajmniej w aktywnej fazie rozwoju. Jeśli twoje znaczniki się sprawdzą, możesz skupić się na błędach CSS. Teraz, jeśli fragmenty znaczników zostaną wstrzyknięte na różnych etapach interakcji z użytkownikiem, zarządzanie wszystkim stanie się bardzo nieporęczne, a całość stanie się krucha.

Pomysł polegał na tym, aby wszystkie konstrukcje UI ze znacznikami były w jednym dokumencie, pobierały TYLKO DANE przez sieć i używały solidnej struktury, która przynajmniej po prostu wstrzyknie dane do konstrukcji znaczników i co najmniej replikuje konstrukcje znaczników które oznaczyłeś jako powtarzalne.

Było to możliwe dzięki XSL-T i XPath w IE5 +, ale praktycznie żadnych innych przeglądarek. Niektóre frameworki przeglądarek F / OSS parały się z XPath, ale nie jest to coś, na czym jeszcze możemy polegać.

Więc jaka jest następna najlepsza rzecz do osiągnięcia takiego wzoru? IBDOM. Pobierz dane z serwera i umieść je w dokumencie. bez wysiłku.


jeszcze jedno: IBDOM używa w 100% czystych metod DOM i zero innerHTML.
Chris Holland,

kolejna uwaga: IBDOM implementuje coś, co nazywam „forkedLoopExecution”, który jest komponentem używanym wewnętrznie, a także czymś, co jest używane samodzielnie. Oto problem: powiedzmy, że modyfikujesz DOM za pomocą funkcji createElement i appendChild, w jakiejś pętli, która musi przejść przez dość dużą tablicę obiektów typu big data: większość przeglądarek nie „odmaluje” interfejsu użytkownika kod wpływający na DOM „zwraca”. W przypadku dużej pętli for z dużą ilością danych, wyniki wyszukiwania mogą zająć zauważalne od pół do kilku sekund, zanim całość zostanie wyświetlona w jednym kawałku.
Chris Holland,

rozwiązanie: wykonanie pętli rozwidlonej wykorzystuje wywoływane przez setTimeout rekurencyjne wykonywanie przez cały okres gromadzenia wielokrotnie przekazywanych danych, aby zasadniczo „powrócić i przemalować” przy każdej iteracji pętli, dając uczucie natychmiastowego renderowania: „daj użytkownikowi coś do spojrzenia -w porządku, kurwa teraz ".
Chris Holland,

2

Powinieneś rzucić okiem na szablony Javascript, jest to mały silnik szablonów używany w słynnej wtyczce jQuery File Upload i opracowany przez tego samego autora, Sebastiana Tschana (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Postępuj zgodnie z instrukcją użytkowania opracowaną przez Sebastiana, po prostu usuń tę linię

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Zastąp go tym

$('#result').html(tmpl('tmpl-demo', data));

Nie zapomnij dodać znacznika wynikowego div również do pliku HTML

<div id="result"></div>

Cieszyć się

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.