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.
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>
{{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 }} |
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}} |
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 }} |
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 ...}} |
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 }} |
conditional inclusion: render different templates depending on one or more expressions | ={{if nickname tmpl="nicknameTemplate"}} {{else tmpl="noNicknameTemplate"}} {{/if}} = |
{{if pathOrExpr1 }} |
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 --}} |