You are here: System » JQueryPlugin » JQueryRender

JQueryRender

01 May 2016 - 14:02 | Version 1 |

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

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 (6) tag or (7). 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 (8) 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
    (9) get the value of the data path or expression, and insert it into the rendered output as a string (10)
    (11) get the HTML-encoded value of the data path or expression, and insert it into the rendered output (12)
    (13) template composition: Iinclude the referenced template: tmpl, rendered using the current data context (14) lives in (15)
    (16)
    ... (17)
    template composition: render the block content of the (18) tag using the object or array specified by the path or expression as data context. (19) (20) (21)
    (22) template composition: render the referenced external template using the specified object or array (23)
    (24)
    ... (25)
    template composition: iterate over the properties of the object, and render the block content of the (26) tag (or the referenced external template) once for each property -- using as data context {key: propertyName, prop: propertyValue} (27) (28): (29) (30)
    (31) 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} (32)
    (33)
    ... (34)
    conditional inclusion: render the block content of the (35) tag only if the data-path or expression evaluates to true (36) Nickname: (37) (38))
    (39) conditional inclusion: render the referenced external template only if the data-path or expression evaluates to true (40)
    (41)
    ... (42)
    ... (43)
    conditional inclusion: render the block content of the (44) tag if the expression is true, otherwise render the (45) block (46) Nickname: (47) (48) No nickname {/if}}
    (49)
    (50)
    (51)
    conditional inclusion: render different templates depending on one or more expressions =(52) (53) (54) =
    (55)
    ... (56)
    ... (57)
    ... (58)
    conditional blocks: render the first (59) or (60) block for which the expression is true; if none are true, and there is an (61) without an expression, render that block (62) Nickname: (63) (64) Alternate nickname: (65) (66) No nickname (67)
    (68) acts as a separator, to divide the content of a tag into two or more different content blocks; (69) can be used with (70), (71) or any custom tag (72) Member Name: (73) (74) There are currently no member (75)
    (76) comments to templates, or commenting out sections of a template (77)

    Notes

    1 : :#index+1

    2 : :firstName

    3 : :lastName

    4 : :firstName

    5 : :lastName

    6 : for ..

    7 : : ...

    8 : :

    9 : : pathOrExpr

    10 : :address.street

    11 : > pathOrExpr

    12 : >address.street

    13 : include tmpl=nameOrExpr /

    14 : :name

    15 : include tmpl="#addressTemplate"/

    16 : for pathOrExpr

    17 : /for

    18 : for

    19 : for billing.address

    20 : :city

    21 : /for

    22 : for pathOrExpr tmpl=nameOrExpr /

    23 : for billing.address tmpl="addressTmpl" /

    24 : props pathOrExpr

    25 : /props

    26 : props

    27 : props billing.address

    28 : :key

    29 : :prop

    30 : /props

    31 : props pathOrExpr tmpl=nameOrExpr /

    32 : props billing.address tmpl="addressTmpl" /

    33 : if pathOrExpr

    34 : /if

    35 : if

    36 : if nickname

    37 : :nickname

    38 : /if

    39 : if pathOrExpr tmpl=nameOrExpr /

    40 : if nickname tmpl="nicknameTemplate" /

    41 : if ...

    42 : else

    43 : /if

    44 : if

    45 : else

    46 : if nickname

    47 : :nickname

    48 : else

    49 : if pathOrExpr1 tmpl=nameOrExpr1

    50 : else tmpl=nameOrExpr2

    51 : /if

    52 : if nickname tmpl="nicknameTemplate"

    53 : else tmpl="noNicknameTemplate"

    54 : /if

    55 : if pathOrExpr1

    56 : else pathOrExpr2

    57 : else

    58 : /if

    59 : if

    60 : else

    61 : else

    62 : if nickname

    63 : :nickname

    64 : else altnickname

    65 : :altnickname

    66 : else

    67 : /if

    68 : else ...

    69 : else

    70 : if

    71 : for

    72 : for members

    73 : :name

    74 : else

    75 : /for

    76 : !-- ... --

    77 : !-- this is a comment --


    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 AustLII Communities? Send feedback