JQueryRender

Homepage: http://www.jsviews.com
Author(s): Boris Moore
Version: 0.9.90

%IMAGE{"logo-jsr.png"}%

This plugin brings modern template based javascript apps to Foswiki based on the libraries by Boris Moore. It is intended to supersede jquery.tmpl. JsRender is a light-weight but powerful templating engine, highly extensible, and optimized for high-performance pure string-based rendering, without DOM or jQuery dependency.

Usage

Have you ever found yourself writing code like this?

<script>
var i = 1;

$(arrayOfPersons).each(function () {
   var person = this;
   $("#container").append(
      "<div>" + 
      i++ + 
      ": " + 
      person.firstName + 
      " " + 
      person.lastName + 
    "</div>");
});
</script>

This is rather cumbersome and a nightmare to actually extend, even more so when you meet this kind of common jQuery code in real-life applications. Instead of "DOM plumbing" use a templates like this one:

<script id="personTemplate" type="text/x-jsrender ">
  <div>{{:#index+1}}: {{:firstName}} {{:lastName}}</div>
</script>

This is straight forward and resembles the intended output much closer. Then make use of this template by expanding it for each person in your arrayOfPersons:

<script>
   var result = $("#personTemplate").render(arrayOfPersons);
   $("#container").html(result);
</script>

See how this works out:

Whenever you'd like to use a different layout for the same data just use a different template. No big deal. Imagine doing the same using DOM plumbing…

<script id="personTemplate2" type="text/x-jsrender ">
  <li>{{:firstName}} {{:lastName}}</li>
</script>

Further reading

• http://www.jsviews.com
• JsRender Demos
• Using JsRender with JavaScript and HTML
• Advanced JsRender Templating Features

Syntax

JsRender templates consist of HTML markup plus JsRender tags, such as the {{for ..}} tag or {{: ...}}. All JsRender template tags are wrapped with double curly braces. The tag name can be followed by one or more parameters or expressions. In the case of the {{: }} tag, the result of the expression would then be rendered. A template is used while looping over elements of a JSON array. In each iteration the template is used as a blueprint to process the current property of the JSON object under consideration. All expansions of a template are then concatenated. Templates can also be used to render just a single element. You don't necessarily need to pass an array as data. JsRender can also take a single JSON object and return the rendered template.

(see also http://www.jsviews.com/#jsrapi)

Tag	Description	Example
{{: pathOrExpr }}	get the value of the data path or expression, and insert it into the rendered output as a string	{{:address.street}}
{{> pathOrExpr }}	get the HTML-encoded value of the data path or expression, and insert it into the rendered output	{{>address.street}}
{{include tmpl=nameOrExpr /}}	template composition: Iinclude the referenced template: tmpl, rendered using the current data context	{{:name}} lives in {{include tmpl="#addressTemplate"/}}
{{for pathOrExpr }} … {{/for}}	template composition: render the block content of the {{for}} tag using the object or array specified by the path or expression as data context.	{{for billing.address}} {{:city}} {{/for}}
{{for pathOrExpr tmpl=nameOrExpr /}}	template composition: render the referenced external template using the specified object or array	{{for billing.address tmpl="addressTmpl" /}}
{{props pathOrExpr}} … {{/props}}	template composition: iterate over the properties of the object, and render the block content of the {{props}} tag (or the referenced external template) once for each property -- using as data context {key: propertyName, prop: propertyValue}	{{props billing.address}} {{:key}}: {{:prop}} {{/props}}
{{props pathOrExpr tmpl=nameOrExpr /}}	template composition: iterate over the properties of the object, and render the referenced external template once for each property -- using as data context {key: propertyName, prop: propertyValue}	{{props billing.address tmpl="addressTmpl" /}}
{{if pathOrExpr }} … {{/if}}	conditional inclusion: render the block content of the {{if}} tag only if the data-path or expression evaluates to true	{{if nickname}} Nickname: {{:nickname}} {{/if}})
{{if pathOrExpr tmpl=nameOrExpr /}}	conditional inclusion: render the referenced external template only if the data-path or expression evaluates to true	{{if nickname tmpl="nicknameTemplate" /}}
{{if ...}} … {{else}} … {{/if}}	conditional inclusion: render the block content of the {{if}} tag if the expression is true, otherwise render the {{else}} block	{{if nickname}} Nickname: {{:nickname}} {{else}} No nickname {/if}}
{{if pathOrExpr1 tmpl=nameOrExpr1 }} {{else tmpl=nameOrExpr2 }} {{/if}}	conditional inclusion: render different templates depending on one or more expressions	={{if nickname tmpl="nicknameTemplate"}} {{else tmpl="noNicknameTemplate"}} {{/if}} =
{{if pathOrExpr1 }} … {{else pathOrExpr2}} … {{else}} … {{/if}}	conditional blocks: render the first {{if}} or {{else}} block for which the expression is true; if none are true, and there is an {{else}} without an expression, render that block	{{if nickname}} Nickname: {{:nickname}} {{else altnickname}} Alternate nickname: {{:altnickname}} {{else}} No nickname {{/if}}
{{else … }}	acts as a separator, to divide the content of a tag into two or more different content blocks; {{else}} can be used with {{if}}, {{for}} or any custom tag	{{for members}} Member Name: {{:name}} {{else}} There are currently no member {{/for}}
{{!-- … --}}	comments to templates, or commenting out sections of a template	{{!-- this is a comment --}}