JQueryRender

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

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>

1. [[System.JQueryRender#FootNote4note][(4)]] [[System.JQueryRender#FootNote5note][(5)]]
2. [[System.JQueryRender#FootNote4note][(4)]] [[System.JQueryRender#FootNote5note][(5)]]
3. [[System.JQueryRender#FootNote4note][(4)]] [[System.JQueryRender#FootNote5note][(5)]]
4. [[System.JQueryRender#FootNote4note][(4)]] [[System.JQueryRender#FootNote5note][(5)]]
5. [[System.JQueryRender#FootNote4note][(4)]] [[System.JQueryRender#FootNote5note][(5)]]

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 (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
(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)
(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)
(49) (50) (51)	conditional inclusion: render different templates depending on one or more expressions	=(52) (53) (54) =
(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))
(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}}
(39)	conditional inclusion: render the referenced external template only if the data-path or expression evaluates to true	(40)
(11)	get the HTML-encoded value of the data path or expression, and insert it into the rendered output	(12)
(9)	get the value of the data path or expression, and insert it into the rendered output as a string	(10)
(13)	template composition: Iinclude the referenced template: tmpl, rendered using the current data context	(14) lives in (15)
(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)
(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)

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 --

---