Permalink
Browse files

Major update, which changes the concept of chained tags - {{foo a {{b…

…ar b}} }}

and replaces it with the syntax {{foo a bar(b)}}. You can register helper
functions (example step-by-step/10) and call them from the template markup.

Added support for {{#if a===b}} and similar comparisons.

Added support for numbers, true, false, null, so you can do {{#if a===2}} -
which does number comparison and does not convert to strings. Note that all
these changes confer many of the features and scenario support availabe in
jquery.tmpl.js - but whereas there, this was achieved by eval'ing inline
expressions in the template, the JsRender does not do an eval and does not
allow inline expressions, other than with the {{* code}} tag.

Added initial support for presenters.

Fixes the following Issues
Issue 5 - in that whitespace is preserved by default
Issue 10 (comparisons)
Issue 12 (numbers)
Issue 14
  • Loading branch information...
BorisMoore committed Nov 4, 2011
1 parent 591b497 commit b139a909da7fd05ca1902ce051b0d3fbde8dde81
View
@@ -16,5 +16,8 @@ <h2>JsRender: Next-generation jQuery Templates</h2>
<div class="subhead"><b><a href="http://borismoore.github.com/jsviews/demos/jQueryConfDemosOct2011/index.html">jQuery Conference October 2011: Demo sequence</a></b></div>
+<br /><span class="subhead">Source code:</span>
+<a href="https://github.com/BorisMoore/jsrender">https://github.com/BorisMoore/jsrender</a>
+
</body>
</html>
@@ -26,10 +26,11 @@ <h3>Using {{= }} or {{= !}} to render data values</h3>
<tr>
<td>{{=Title}}</td>
<td class="synopsis">{{=Synopsis!}}</td>
+ <td class="synopsis">{{=Synopsis}}</td>
</tr>
</script>
-<table><tbody class="header"><tr><th>Title</th><th>Synopsis</th></tr></tbody>
+<table><tbody class="header"><tr><th>Title</th><th>No Encode</th><th>HTML Encode</th></tr></tbody>
<tbody id="movieList"></tbody>
</table>
@@ -16,10 +16,10 @@ <h3>Using {{each}} to render hierarchical data - external template.</h3>
<tr>
<td>{{=Title}}</td>
<td>
- {{each Languages _content="#columnTemplate"}}
+ {{each Languages tmpl="#columnTemplate"}}
</td>
<td>
- {{each Languages _content=tmpl}}
+ {{each Languages tmpl=tmpl}}
</td>
</tr>
</script>
@@ -15,7 +15,7 @@ <h3>Accessing paths</h3>
<b>{{=$itemNumber!}}:</b> {{=firstName!}} {{=lastName!}}:
<br/>
-{{each address _content="#addressTemplate"}}
+{{each address tmpl="#addressTemplate"}}
{{#if phones cells}}
<div>
@@ -13,20 +13,20 @@
<h3>Providing a custom tag</h3>
<pre>
-<td>{{#sort Languages reverse="true"}}...{{/sort}}</td>
+<td>{{#sort Languages reverse=true}}...{{/sort}}</td>
$.views.registerTags({
- sort: function( array, hash, content ){
+ sort: function( array ){
var ret = "";
- if ( hash.reverse === "true" ) {
+ if ( this.reverse ) {
// Render in reverse order
for ( var l = array.length, i = l; i; i-- ) {
- ret += $.render( content, array[ i - 1 ]);
+ ret += $.render( this.tmpl, array[ i - 1 ]);
}
} else {
// Render in original order
- ret += $.render( content, array );
+ ret += $.render( this.tmpl, array );
}
return ret;
}
@@ -37,8 +37,8 @@ <h3>Providing a custom tag</h3>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<tr>
<td>{{=Title}}</td>
- <td>{{sort Languages reverse="false" _content="#sortedTemplate"}}</td>
- <td>{{#sort Languages reverse="true"}}
+ <td>{{sort Languages reverse=false tmpl="#sortedTemplate"}}</td>
+ <td>{{#sort Languages reverse=true}}
<div>
<b>{{=Name}}</b>
</div>
@@ -59,16 +59,16 @@ <h3>Providing a custom tag</h3>
$.views.registerTags({
- sort: function( array, hash ){
+ sort: function( array ){
var ret = "";
- if ( hash.reverse === "true" ) {
+ if ( this.reverse ) {
// Render in reverse order
for ( var l = array.length, i = l; i; i-- ) {
- ret += $.render( hash._content, array[ i - 1 ]);
+ ret += $.render( this.tmpl, array[ i - 1 ]);
}
} else {
// Render in original order
- ret += $.render( hash._content, array );
+ ret += $.render( this.tmpl, array );
}
return ret;
}
@@ -16,14 +16,18 @@
<h3>Registering 'helper' tags.</h3>
<pre>
+{{get Languages defaultValue="No languages!"}}
+
+{{yesNo Languages yes="Alternate languages available:" no="No alternate languages"}}
+
$.views.registerTags({
- get: function( value, hash ){
- return value || hash[ "default" ];
+ get: function( value ){
+ return value || this.defaultValue;
},
- yesNo: function( value, hash ){
- return value ? hash.yes : hash.no;
+ yesNo: function( value ){
+ return value ? this.yes : this.no;
}
});
@@ -42,7 +46,7 @@ <h3>Registering 'helper' tags.</h3>
<tr>
<td>{{=Title}}</td>
<td>
- {{get Languages default="No alternate languages"}}
+ {{get Languages defaultValue="No languages!"}}
</td>
</tr>
</script>
@@ -51,7 +55,8 @@ <h3>Registering 'helper' tags.</h3>
<tr>
<td>{{=Title}}</td>
<td>
- {{yesNo Languages yes="Alternate languages available" no="No alternate languages"}}
+ {{yesNo Languages yes="Alternate languages available:" no="No alternate languages"}}
+ <em>{{=Languages}}</em>
</td>
</tr>
</script>
@@ -71,12 +76,12 @@ <h3>Registering 'helper' tags.</h3>
<script type="text/javascript">
$.views.registerTags({
- get: function( value, hash ){
- return value || hash[ "default" ];
+ get: function( value ){
+ return value || this.defaultValue;
},
yesNo: function( value, hash ){
- return value ? hash.yes : hash.no;
+ return value ? this.yes : this.no;
}
});
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
+ <script src="../../jsrender.js" type="text/javascript"></script>
+ <link href="../resources/demos.css" rel="stylesheet" type="text/css" />
+
+ <link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<a href="index.html">Home</a><br />
+
+<h3>Helper functions and comparison tests</h3>
+
+<script id="movieTemplate1" type="text/x-jquery-tmpl">
+ <tr>
+ <td>{{=Title}}</td>
+ <td>
+ {{if $ctx.not(Languages) tmpl="#messageTmpl"}}
+ </td>
+ <td>
+ {{if Languages==null tmpl="#messageTmpl"}}
+ </td>
+ </tr>
+</script>
+
+<script id="messageTmpl" type="text/x-jquery-tmpl">
+ <b>Warning:</b> <em>No alternate languages</em>
+</script>
+
+<b>Sample 1</b>
+
+<pre>
+{{#if $ctx.not(Languages)}}...{{/if}}
+
+{{#if Languages==null}}...{{/if}}
+</pre>
+
+<table><tbody class="header"><tr><th>Title</th><th>{{if $ctx.not(a) ...}}</th><th>{{if a==null ...}}</th></tr></tbody>
+ <tbody id="movieList1"></tbody>
+</table>
+
+<script id="movieTemplate2" type="text/x-jquery-tmpl">
+ <tr>
+ <td>{{=Title!}}</td>
+ <td>
+ {{#each Languages}}
+ {{=$ctx.format(Name, "upper")}}{{#if $ctx.nextToLast($view)}} and {{else $ctx.notLast($view)}}, {{/if}}
+ {{/each}}
+ </td>
+ </tr>
+</script>
+
+<b>Sample 2</b>
+
+<pre>
+{{=$ctx.format(Name, "upper")}}
+
+{{#if $ctx.nextToLast($view)}}
+
+
+$.views.registerHelpers({
+
+ format: function( val, format ){
+ ...
+ },
+
+ nextToLast: function( view ) {
+ return view.itemNumber === view.parent.data.length - 1;
+ },
+
+ ...
+});
+</pre>
+
+<table><tbody class="header"><tr><th>Title</th><th>Languages</th></tr></tbody>
+ <tbody id="movieList2"></tbody>
+</table>
+
+<script type="text/javascript">
+
+ $.views.registerHelpers({
+
+ format: function( val, format ){
+ var ret;
+ switch( format ) {
+ case "upper":
+ ret = val.toUpperCase();
+ break;
+ case "lower":
+ ret = val.toLowerCase();
+ break;
+ }
+ return $.views.encode( this._encoding || "html", ret );
+ },
+
+ nextToLast: function( view ) {
+ return view.itemNumber === view.parent.data.length - 1;
+ },
+
+ notLast: function( view ) {
+ return view.itemNumber !== view.parent.data.length;
+ }
+ });
+
+ var movies = [
+ {
+ Title: "Meet Joe Black",
+ Languages: null
+ },
+ {
+ Title: "The Mighty"
+ },
+ {
+ Title: "Eyes Wide Shut",
+ Languages: [
+ { Name: "French" },
+ { Name: "German" },
+ { Name: "Spanish" }
+ ]
+ }
+ ];
+
+ $( "#movieList1" ).html(
+ $( "#movieTemplate1" ).render( movies )
+ );
+
+ $( "#movieList2" ).html(
+ $( "#movieTemplate2" ).render( movies )
+ );
+
+</script>
+
+</body>
+</html>
@@ -12,6 +12,18 @@
<h3>Allowing code within templates: program flow</h3>
+<pre>
+{{*
+ if ( myexpression ) {
+}}
+ ...
+{{*
+ }
+}}
+
+$.views.allowCode = true;
+</pre>
+
<script id="movieTemplate" type="text/x-jquery-tmpl">
<tr>
<td>{{=Title}}</td>
@@ -12,6 +12,16 @@
<h3>Allowing code within templates: returning content</h3>
+<pre>
+{{*
+ if ( myexpression ) {
+ result+= ...;
+ ...
+ }
+}}
+
+$.views.allowCode = true;
+</pre>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<tr>
<td>{{=Title}}</td>
@@ -14,7 +14,7 @@ <h3>JsRender without jQuery</h3>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<tr>
<td>{{=Title}}</td>
- <td>{{sort Languages reverse="false" _content="sortedTemplate"}}</td>
+ <td>{{sort Languages reverse="false" tmpl="sortedTemplate"}}</td>
<td>{{#sort Languages reverse="true"}}
<div>
<b>{{=Name}}</b>
@@ -33,19 +33,21 @@ <h3>JsRender without jQuery</h3>
<script type="text/javascript">
$.views.registerTags({
- sort: function( array, hash ){
+
+ sort: function( array ){
var ret = "";
- if ( hash.reverse === "true" ) {
+ if ( this.reverse ) {
// Render in reverse order
for ( var l = array.length, i = l; i; i-- ) {
- ret += $.render( hash._content, array[ i - 1 ]);
+ ret += $.render( this.tmpl, array[ i - 1 ]);
}
} else {
// Render in original order
- ret += $.render( hash._content, array );
+ ret += $.render( this.tmpl, array );
}
return ret;
- },
+ }
+
});
var movies = [
@@ -20,7 +20,8 @@ <h2>JsRender: Next-generation jQuery Templates</h2>
<a href="06_template-composition.html">Template composition</a><br />
<a href="07_paths.html">Accessing paths</a><br />
<a href="08_custom-tags.html">Custom tags</a><br />
- <a href="09_helper-tags.html">Registering 'helper' tags</a><br />
+ <a href="09_helper-tags.html">'Helper' tags</a><br />
+ <a href="10_helper-functions.html">'Helper' functions, and comparison tests</a><br />
<a href="11_allow-code.html">Allowing code - program flow</a><br />
<a href="11b_allow-code.html">Allowing code - returning content</a><br />
<a href="12_without-jquery.html">JsRender without jQuery</a><br />
Oops, something went wrong.

0 comments on commit b139a90

Please sign in to comment.