jTemplates – szablony w JavaScript

Przy pisaniu kilku ostatnich stron WWW potrzebowałem dość często tworzenia elementów HTML na podstawie konkretnego źródła danych – coś co zwykle załatwia ASP:Repeater czy ASP:ListView (i jeszcze kilka innych kontrolek serwerowych). Problem polegał jednak na tym, że naprawdę nie chciałem zaprzęgać do tego wszystkiego ASP.NET, mogę większość rzeczy zrobić w JavaScript to po co mi do tego code behind?

I tak w pierwszym projekcie testowałem rozwiązanie tworzenia elementów HTML w jQuery, które tak naprawdę było… dość toporne :) I całość rozwiązania nie zachęcała do dalszej pracy z pluginem.

Drugim sposobem jaki spróbowałem to napisałem mały skrypt kopiujący element który mnie interesował i wypełniający go danymi. Problem leżał w tym iż nie zawsze wszystkie możliwe pola chciałem wypełniać i teraz cała zabawa polegała na if null then co jakoś ładnie i fajnie nie wyglądało :) na pewno byłby problem gdybym rozwiązanie chciał rozszerzyć o kolejne elementy.

W końcu natrafiłem na plugin do jQuery – jTempaltes. Jest to dość prosty plugin umożliwiający tworzenie szablonów w plain text, które potem można wykorzystać w celu stworzenia elementów HTML. Coś takiego będzie dopiero dostępne w ASP.NET 4.0 i szczerze mówiąc nie mogę się już tego doczekać – aktualnie zaś, funkcjonalność tą w Beta całkowicie omijam zresztą tak samo jak w Parallel Extension Framework, którego za każdym razem jak się zabierałem za zabawę to się okazywało, że trochę sporawe zmiany były w nim wprowadzone o czym MS łaskawie informowałem 2 tygodnie po czasie (zmiany były na tyle duże, że żaden przykład się nie kompilował, klasy/metody zostały usuwane, przenoszone lub ich znaczenie zmieniane, uczenie się na takiej podstawie jest… stratą czasu).

Zróbmy więc coś z jTemplates, na przykład coś takiego:

To czego potrzebujemy do rozpoczęcia zabawy z jTemplates, to pliki js jQuery i jTemplates. Dodajemy je na stronie tak jak każdy skrypt:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="http://jtemplates.tpython.com/jquery-jtemplates.js"></script>

Byśmy mogli cokolwiek wyrenderować to potrzebujemy danych, dla naszego przykładu wykorzystamy następujący json object, który umieścimy między tagami <script> na stronie:

var myLinks = {
    title: 'Lista linków',
    links: [
        { title: 'Maciej Aniserowicz', url: 'http://www.maciejaniserowicz.com' },
        { title: 'Dotnetomaniak - najlepsze wpisy', url: 'http://dotnetomaniak.pl/' },
        { title: 'CodeGuru - portal programistów .NET', url: 'http://www.codeguru.pl/' }
    ]
};

Następnie gdzieś musimy umieścić nasz szablon – mimo iż jTemplates działają na zasadzie plain text to jednak nie chcemy umieszczać całego szablonu jako parametr ciągu znaków do metody renderującej dane na podstawie przekazanego szablonu. W tym celu najlepiej jest stworzyć na stronie Tag HTML: textarea i ustawić jego styl na niewidoczny:

<textarea cols="0" rows ="0" style="display:none;" id="allLinks"><!--

--></textarea>

Teraz by wyświetlić naszą listę elementów, trzeba napisać krótki markup dla naszego szablonu:

<textarea cols="0" rows ="0" style="display:none;" id="allLinks"><!--

<h3>{$T.title}</h3>
<ul>
    {#foreach $T.links as link}
        <li>
            {$T.link.title} - <a href="{$T.link.url}">link</a>
        </li>
    {#/for}
</ul>

--></textarea>

I to prawie już koniec. To czego nam brakuje, to miejsca w którym nasz wygenerowany output z szablonu ma być umieszczony:

<div id="links">
</div> 

Oraz funkcji ładującej dane do szablonu:

$(document).ready(function() {
    // #links gdzie ma być szablon wygenerowany
    // allLinks ID elementu w którym znajduje się szablon
    // myLinks json object zawierający dane do wyświetlenia
    $("#links").setTemplateElement("allLinks");
    $("#links").processTemplate(myLinks);
});

To jest akurat bardzo prosty przykład, jednak za pomocą jTemplates można wykonać dużo bardziej zaawansowane rzeczy – zarówno zagnieżdżone szablony czy też szablony które oczekują na dane pobierane asynchronicznie. Dzięki przejrzystej dokumentacji i rozbudowanych przykładach na stronach jTemplates dość szybko można zapoznać się z funkcjonalnością i sposobami wykorzystania szablonów – osobiście gorąco polecam plugin :)

A tutaj zamieszczam cały kod przykładu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="http://jtemplates.tpython.com/jquery-jtemplates.js"></script>
        <script type="text/javascript">
            var myLinks = {
                title: 'Lista linków',
                links: [
                    { title: 'Maciej Aniserowicz', url: 'http://www.maciejaniserowicz.com' },
                    { title: 'Dotnetomaniak - najlepsze wpisy', url: 'http://dotnetomaniak.pl/' },
                    { title: 'CodeGuru - portal programistów .NET', url: 'http://www.codeguru.pl/' }
                ]
            };

            $(document).ready(function() {
                // #links gdzie ma być szablon wygenerowany
                // allLinks ID elementu w którym znajduje się szablon
                // myLinks json object zawierający dane do wyświetlenia
                $("#links").setTemplateElement("allLinks");
                $("#links").processTemplate(myLinks);
            });
            
        </script>
    </head>
    <body>
        <textarea cols="0" rows ="0" style="display:none;" id="allLinks"><!--

        <h3>{$T.title}</h3>
        <ul>
            {#foreach $T.links as link}
                <li>
                    {$T.link.title} - <a href="{$T.link.url}">link</a>
                </li>
            {#/for}
        </ul>

        --></textarea>

        <div id="links">
        </div> 

    </body>
</html>