You are here: DENX Home »  System » JQueryPlugin » JQueryRender

JQueryRender

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

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

    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)

    TagSorted ascending Description Example
    {{> pathOrExpr }} get the HTML-encoded value of the data path or expression, and insert it into the rendered output {{>address.street}}
    {{!-- … --}} comments to templates, or commenting out sections of a template {{!-- this is a comment --}}
    {{: pathOrExpr }} get the value of the data path or expression, and insert it into the rendered output as a string {{:address.street}}
    {{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}}
    {{for pathOrExpr tmpl=nameOrExpr /}} template composition: render the referenced external template using the specified object or array {{for billing.address tmpl="addressTmpl" /}}
    {{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}}
    {{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 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 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 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}}
    {{include tmpl=nameOrExpr /}} template composition: Iinclude the referenced template: tmpl, rendered using the current data context {{:name}} lives in {{include tmpl="#addressTemplate"/}}
    {{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" /}}
    {{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}}
    This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
    Ideas, requests, problems regarding DENX? Send feedback
    This website is using cookies. More info. That's Fine