Szsz.pl

Stary Przykład

W ramach przypomnienia, oto fragment odpowiedzialny za wizualizację danych..

index.html.

$(function() {
    $.getJSON("/show", function(data) {
        $("body").html(
            data.name + ", " + data.value
        );
    });
});

Jak wspominałem, takie rozwiązanie jest mało eleganckie. Wynik jest efektem działania programu, który trzeba modyfikować przy każdej potencjalnej zmianie wyglądu.

Programiści tworzący klasyczne aplikacje webowe znają bardzo dobrze problemy związane z tekim podejściem. Znają też rozwiązanie: Szablony stron. Klasycznym przykładem szablonów są JSP i Smarty. Korzystanie z nich ułatwia pisanie aplikacji, oraz co ważniejsze, dostosowanie ich do indywidualnych wymagań klienta. Nie można również ignorować faktu że szablony mogą być tworzone przez inne osoby, projektantów i grafików, a nawet funkcjonować niezależnie od aplikacji.

Szablony w JavaScript

Jak uzyskać podobne możliwości, generując stronę na przeglądarce?

W Sieci można znaleźć kilkanaście prostych bibliotek, jednak zazwyczaj są to doraźne narzędzia, które pozwoliły autorowi ominąć ograniczenia, które napotkał pisząc swoją aplikację.

Jedynym w miarę dojrzałym rozwiązaniem jest Trimpath Template. Oferuje składnię wzorowaną na systemie szablonów Smarty i pozwala na tworzenie bardzo rozbudowanych, a jednocześnie całkiem czytelnych szablonów. Trimpath Template może być z powodzeniem używane jako jedyny mechanizm służący do wyświetlania informacjj.

Jednak gdy natknąłem się na dość nieprzyjemny błąd w kodzie, zacząłem się zastanawiać nad napisaniem własnego odpowiednika, który z czasem oferował by znacznie większą wygodę pracy.

Napisanie własnego silnika do szablonów okazało się łatwiejsze niż się tego spodziewałem. Pierwsza działająca wersja, ta którą mam zamiar tu zaprezentować, ma tylko 50 linii kodu.

tpl1.js

HelloWorld.. znowu..

Pora na kolejny przykład. Na początek zmierzmy się z HelloWorld. Oto dane wysłane przez serwer..

{
  'name':  'Hello',
  'value': 'world'
}

{name}, {value}

To wszystko.. Szablon zawiera to co ma być wyświetlone i nic więcej.

Prawdziwy przykład

Ponieważ HelloWorld tak na prawdę niczego nie wyjaśnia, poniżej prezentuję nieco bardziej rozbudowany przykład, w którym serwer wysyła coś takiego:

{
  'name':  'rss',
  'list': [
    {
      'title':'40 Lat Temu',
      'url':'http://blog.szsz.pl/2009/07/40-lat-temu.html'
    },
    {
      'title':'Ranking przeglądarek - Aktualizacja',
      'url':'http://blog.szsz.pl/2009/07/ranking-przegladarek-aktualizacja.html'
    },
    {
      'title':'GAE/J - Javascript',
      'url':'http://blog.szsz.pl/2009/05/gaej-javascript.html'
    },
    {
      'title':'GAE/J - Hello World (2)',
      'url':'http://blog.szsz.pl/2009/04/gaej-hello-world-2.html'
    },
    {
      'title':'GAE/J - Hello World (1)',
      'url':'http://blog.szsz.pl/2009/04/gaej-hello-world-1.html'
    }
  ]
}

Szablon może wyglądać tak:

  <h1>{name}</h1>
  <ul>
    {for item in list}
      <li><a href="{item.url}">{item.title}</a></li>
    {/for}
  </ul>

API

Pozostaje jeszcze tylko odpowiedzieć na pytanie jak to wszystko wyświetlić.

Generowanie danych w formacie JSON już opisywałem. Cały szablon jest zaimplementowany jako pojedyńcza klasa Tpl

Zakładam że zarówno tekst jak i dane_json zostaną pobrane za pomocą odpowiednich wywołań XMLHttpRequest, natomiast wynik zostanie wklejony na docelową stronę

  var szablon = new Tpl(tekst);           // kompilacja
  var wynik   = szablon.apply(dane_json); // wywołanie

Pisząc odpowiedni plugin dla jQuery można uprościć wywołanie:

    $.getJSON("/show", function(data) {
        $("body").applyTpl("hello.tpl", data);
    });

... o czym napiszę już wkrótce.