The service provided by Consileon was professional and comprehensive with a very good understanding of our needs and constrains.

Wolfgang Hafenmayer, Managing partner, LGT Venture Philanthropy

Technical quality of staff offered, capability of performing various project roles, as well as motivation and dedication to the project (... [...]

dr Walter Benzing, Head of development B2O, net mobile AG

Technical quality of staff offered, capability of performing roles of developers, lead developers, trainers, team leaders, architects as wel [...]

Karl Lohmann, Itellium Systems & Services GmbH

Firma Consileon Polska jest niezawodnym i godnym zaufania partnerem w biznesie, realizującym usługi z należytą starannością (...)

Waldemar Ściesiek, Dyrektor zarządzający IT, Polski Bank

The team was always highly motivated and professional in every aspect to perform on critical needs of our startup environment.

Denis Benic, Founder of Ink Labs

jQuery – czyste szablony HTML

Category: Other Tags:

Ta historia będzie o jquery pure templates – czyste wzorce HTML w jquery.

This article is also available in english version (see link at the bottom of this article).

Podczas pisania kodu na nowym projekcie znalazłem świetną bibliotekę Pure napisaną przez BeeBole i miałem właśnie o niej pisać. Ale wraz z użyciem jej znajdowałem coraz więcej problemów. Najpierw chciałem naprawić tą bibliotekę, ale w środku debugowania okazało się to nie takie proste, 20 kilobajtów źródeł ciężko zmienić.

Zdecydowałem się więc napisać swoją bibliotekę opisującą podobną ideę, ale wykorzystując inne podejście. Moja biblioteka jest nadal czysta, nie wymaga jednak śmiesznych znaczników HTML żeby wypełnić go danymi, wystarczy napisać kod który zawiera selektory jquery. Moja pierwsza próba została wykonana z użyciem selektorów jquery bezpośrednio w definicji danych:

data = {'a#my':"my url",'a#my@href':"#/url"}

Po napisaniu działającego kodu wzorcowego tylko w 3 godziny pomyślałem że dobrze by było mapować klucze z danych na selektory w jquery, tak żeby serwer nie musiał zwracać selektorów jako kluczy w JSON:

data2 = {'name':"my url",'link':"#/url"}

Do tego potrzebna jest prosta mapa:

map2 = {'name':'a#my','link':'a#my@href'}

Więc jak to uruchomić? Proste :). Załącz bibliotekę w swoim kodzie (najlepiej w nagłówku):

<script src="jquery-pure-template.js" type="text/javascript" charset="utf-8"></script>

I wywołaj render na elementach wybranych przez jquery:

$('.user').render(data);

Lub używając mapy:

$('.user').render(data2,{map:map2});

Do działania potrzebny jest wzorzec (template) HTML:

<div class="user"><a href="#"></a></div>

na koniec otrzymamy oto taki wynik w HTML:

<div class="user"><a href="#/url">my url</a></div>

To był prosty przykład, ale ta biblioteka działa także z tablicami oraz zagnieżdżonymi tablicami, po prostu dajcie temu szanse, i pamiętajcie: nie zmuszajcie HTML do określania logiki, niech dane posterują logiką nie widok.

Oczywiście założone rozwiązanie może mieć kilka problemów, najważniejszy to wydajność. Tablice powyżej 500 elementów zaczynają zwalniać, ale używając zagnieżdżonych tablic można spokojnie operować na 5000 elementów na w miarę nowoczesnym komputerze. Dodatkowo dodanie id do zbiorów może przyśpieszyć kod nawet o 20% (znajdowanie elementów przez jquery).

Wiem że istnieją szybsze rozwiązania, które mogą bez problemu wyświetlić duże ilości danych, ale moje jest proste, tylko 70 linii kodu, to czyni je niesamowicie prostym w utrzymaniu i modyfikacji. Łatwiej pracować z mniejszą ilością kodu 🙂

http://niczsoft.com/2010/11/jquery-pure-templates/


Michał Papis

Programista, konsultant IT, administrator.

Pasjonuje się programowaniem oraz administracja systemami (Linux). W wolnym czasie zajmuje się zdobywaniem wiedzy z zakresu IT, a szczególnie programowania. Obecnie realizuje projekty najczęściej używając frameworków Ruby on Rails oraz jQuery.


Tags:

Comments

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Trwa ładowanie