JsRender - odc.2

W tym odcinku zaawansowane możliwości biblioteki JsRender na podstawie artykułu Client Insight: Advanced JsRender Templating Features.

Pojedynczy obiekt z propercjami

Zamiast:

<div>{{:address.street1}}</div>

<div>{{:address.street2}}</div>

<div>{{:address.city}}, {{:address.state}} {{:address.postalCode}}</div>

Konstrukcja for (w tym przypadku przypomina with z niektórych języków)

{{for address}}

       <div>{{:street1}}</div>

       <div>{{:street2}}</div>

       <div>{{:city}}, {{:state}} {{:postalCode}}</div>

{{/for}}

Zewnętrzne szablony:

1. renderTemplate = function (tmplName, targetSelector, data) {
2. var file = formatTemplatePath(tmplName);
3. $.get(file, null, function (template) {
4. var tmpl = $.templates(template);
5. var htmlString = tmpl.render(data);
6. if (targetSelector) {
7. $(targetSelector).html(htmlString);
8. }
9. return htmlString;
10. });
11. };

Szablony można definiować w postaci samego HTML z tagami JsRender albo zawierając w tagach <script>.

Specjalne ścieżki:

• #view
• #data
• #parent
• #index

1. <div>{{:#data.section}}</div>
2. <div>{{:#parent.parent.parent.parent.data.name}}</div>
3. <div>{{:#view.data.section}}</div>

Wyrażenia:

+,  -,  *,  /,  ||,  &&,  !,  ?:, (), %, <=, >=, <,  >, ===, !==

Wspierana jest ewaluacja, ale nie przypisanie wyrażenia.

Własne tagi, helpery i konwertery

1. {{myConverter:name}}
2. {{myTag name}}
3. {{:~myHelper(name)}}
4. {{:~myParameter}}

Własny tag - np. własna kontrolka

{{:rating}}

{{createStars averageRating max=5/}} - lepiej tworzyć przy pomocy JS i CSS

1. $.views.tags({
2. createStars: function (rating) {
3. var ratingArray = [], defaultMax = 5;
4. var max = this.props.max || defaultMax;  //odwołanie do deklaratywnego property
5. for (var i = 1; i <= max; i++) {
6. ratingArray.push(i <= rating ?
7. "rating fullStar" : "rating emptyStar");
8. }
9. var htmlString = "";
10. if (this.tmpl) {
11. // Use the content or the template passed in with the template property.
12. htmlString = this. renderContent(ratingArray);
13. } else {
14. // Use the compiled named template.
15. htmlString = $.render.compiledRatingTmpl(ratingArray);
16. }
17. return htmlString;
18. }

Własne konwertery

<div class="text highlightText">{{priceAlert:salePrice}}</div>

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

1. $.views.converters({
2. ensureUrl: function (value) {
3. return (value ? value : "/images/icon-nocover.png");
4. },
5. priceAlert: function (value) {0
6. return (value < 10 ? "1 Day Special!" : "Sale Price");
7. }
8. });

Konwertery są tutaj dedykowane dla bezparametrowej konwersji. W przypadku potrzeby przekazywania parametrów należy stosować helpery lub własne tagi.

Helpery

Dwa sposoby definiowania

1. $.views.helpers({  //widoczne we wszystkich szablonach
2. todaysPrices: { unitPrice: 23.40 },
3. extPrice:function(unitPrice, qty){
4. return unitPrice * qty;
5. }
6. });

Przekazanie jako opcje przy wywoływaniu metody render

1. $.render.myTemplate( data, {
2. todaysPrices: { unitPrice: 23.40 },
3. extPrice:function(unitPrice, qty){
4. return unitPrice * qty;
5. }
6. });

Odwoływanie się do helperów w szablonie

{{: ~extPrice(~todaysPrices.unitPrice, qty) }}

{{for ~getGuitars('acoustic')}} ... {{/for}}

Wiele parametrów

1. $.views.helpers({
2. concat:function concat() {
3. return "".concat.apply( "", arguments );
4. }
5. })

Możliwość umieszczania kodu w bloku {{* }} (stosować w ostateczności, miesza warstwę prezentacji z logiką –)

1. <script id="myTmpl" type="text/x-jsrender">
2. <tr>
3. <td>{{:name}}</td>
4. <td>
5. {{for languages}}
6. {{:#data}}{{*
7. if ( view.index === view.parent.data.length - 2 ) {
8. }} and {{*
9. } else if ( view.index < view.parent.data.length - 2 ) {
10. }}, {{* } }}
11. {{/for}}
12. </td>
13. </tr>
14. </script>

Potrzebujemy ustawić opcję allowCode na wartość true (domyślnie jest false)

1. $.templates("movieTmpl", {
2. markup: "#myTmpl",
3. allowCode: true
4. });
5. $("#movieRows").html(
6. $.render.movieTmpl(my.vm.movies)
7. );

Lepiej jednak logikę przenosić do helperów