JQueryRender

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

%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

    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 --}}
    Topic revision: r1 - 17 Jun 2022, ProjectContributor
    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 Foswiki? Send feedback