JsRender - odc.1

Tym razem jakieś spojrzenie na bibliotekę JsRender promowaną przez Johna Papę. Cechuje ją m.in bezkodowa składnia, brak zależności od jQuery i DOM, większa szybkość działania w porównaniu do szablonów jQuery, duża rozszerzalność - m.in wsparcie dla tworzenia własnych funkcji itd. Razem z biblioteką JsViews wydają się być lepszą alternatywą dla szablonów jQuery. Dostrzegł to m.in zespół jQuery UI…  Na początek trochę notatek sporządzonych na podstawie artykułu Client Insight: Using JsRender with JavaScript and HTML.

Przykładowy szablon:

1. <script id="myMovieTemplate" type="text/x-jsrender ">
2. <div>{{:#index+1}}: {{:name}} ({{:releaseYear}})</div>
3. </script>

Renderowanie szablonu HTML w postaci <script> z id:

$("#movieContainer").html($("#myMovieTemplate").render(my.vm.movies));

Renderowanie ze stringa:

jsviews.templates({
movieTemplate: document.getElementById("myMovieTemplate").innerHTML
});
document.getElementById("movieContainerNojQuery").innerHTML
= jsviews.render.movieTemplate(my.vm.movies);

Popularne wyrażenia składniowe:

{{PropertyName}} - wartość property elementu z danymi
{{:movie.releaseYear}} - zagnieżdżona property
{{:movie.releaseYear < 2000}} - proste porównanie
{{:movie.name}} - wartość bez kodowania
{{>movie.name}} - wartość zakodowana w HTML
{{html:movie.name}} - wartość zakodowana w HTML
boxArt.smallUrl = boxArt['smallUrl']

JsRender wykrywa, czy przekazany parametr z danymi jest tablicą czy też nie.

Dane hierarchiczne:

iteracja po tablicy:

{{for cast}}

       <div>{{:stageName}}</div>

{{/for}}

bezpośrednie odwołanie się do data contextu:

{{for phone}}<div>{{:#data}}</div>{{/for}}

Wyrażenia warunkowe:

{{if boxArt.smallUrl}}

     <img src="{{:boxArt.smallUrl}}"/>

{{else}}

     <img src="../images/icon-nocover.png"/>

{{/if}}

 

{{if fullPrice !== salePrice}}

      <div class="text highlightText">

      PRICED TO SELL!</div>

{{/if}}

 

{{if qtyInStock >= 10}}

       In Stock

{{else qtyInStock}}

Only {{:qtyInStock}} left!

{{else}}

       Not available.

{{/if}}

Odwołania hierarchiczne do rodzicach, po indeksach:

    <img src="{{:#parent.parent.data[2].boxArt.smallUrl}}"/>

Używanie liczników i bardziej złożonych logicznych wyrażeń:

    {{for movies}}

    <div class="caption">

         {{:#index}}: {{:name}}

     </div>

    {{/for}}

Jednoczesna iteracja po więcej niż 1 tablicy:

{{for stars cast}}
      <div class="text">{{:name}}</div>
{{/for}}

Zagnieżdżanie szablonów - nazwy lub selectory jQuery:

{{for myArray tmpl="myTmpl"/}}

<ul>
         {{for movies
             tmpl="#movieTemplateMedium"/}}
</ul>