Permalink
Browse files

Merge branch 'master' into warn_about_missing_helpers

  • Loading branch information...
2 parents 813b36c + 4664009 commit c7ce2c66dacad041caf0204fb5a87196dcc760a8 @patmoore committed Apr 23, 2012
View
39 demos/demos.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>JsRender: Demos</title>
+<link href="resources/demos.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<div class="subhead"><< <a href="index.html">Index for JsRender and JsViews</a></div>
+
+<h2>JsRender: Demos</h2>
+
+<h3>JsRender - step-by-step samples</h3>
+
+<ul class="indexitems">
+ <li><a href="step-by-step/01_inserting-data.html">Inserting data values</a></li>
+ <li><a href="step-by-step/02_compiling-templates-from-strings.html">Compiling templates from strings</a></li>
+ <li><a href="step-by-step/03_no-encoding.html">{{: }} and {{> }}</a></li>
+ <li><a href="step-by-step/04_if-else-tag.html">{{if}} and {{else}}</a></li>
+ <li><a href="step-by-step/05_for-tag.html">{{for}}</a></li>
+ <li><a href="step-by-step/06_template-composition.html">Template composition</a></li>
+ <li><a href="step-by-step/07_paths.html">Accessing paths</a></li>
+ <li><a href="step-by-step/08_custom-tags.html">Custom tags</a></li>
+ <li><a href="step-by-step/09_helper-functions.html">'Helper' functions</a></li>
+ <li><a href="step-by-step/10_comparison-tests.html">Comparison tests</a></li>
+ <li><a href="step-by-step/11_layout-templates.html">Layout templates</a></li>
+ <li><a href="step-by-step/20_without-jquery.html">JsRender without jQuery</a></li>
+</ul>
+
+<h3>JsRender - scenario examples</h3>
+
+<ul class="indexitems">
+ <li><a href="scenarios/01_default-values-scenario.html">'Default values' scenario</a></li>
+ <li><a href="scenarios/02_separators-scenario.html">'Separators' scenario</a></li>
+ <li><a href="scenarios/03_iterating-through-fields-scenario.html">'Iterating through fields' scenario</a></li>
+ <li><a href="scenarios/04_assigning-variables-scenario.html">'Assigning variables' scenario</a></li>
+</ul>
+</body>
+</html>
View
34 demos/index.html
@@ -1,33 +1,45 @@
<!DOCTYPE html>
<html>
<head>
-<title>JsRender: Step by step</title>
+<title>JsRender: Demos</title>
<link href="resources/demos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>JsRender: Next-generation jQuery Templates</h2>
<div class="subhead"><em>JsRender</em>:</div>
+
<div class="box">
-<div class="desc">JsRender templates are optimized for high-performance pure string-based rendering, without DOM or jQuery dependency</div>
-<div class="subhead"><b><a href="step-by-step/index.html">JsRender: step-by-step samples</a></b></div>
-<span class="subhead">Source code:</span>
-<a href="https://github.com/BorisMoore/jsrender">https://github.com/BorisMoore/jsrender</a>
+ <div class="desc">JsRender templates are optimized for high-performance pure string-based rendering, without DOM or jQuery dependency</div>
+ <div class="subhead"><b><a href="demos.html">JsRender: Demos</a></b></div>
+ <div class="label">Source code:</div>
+ <div><a href="https://github.com/BorisMoore/jsrender">https://github.com/BorisMoore/jsrender</a></div>
</div>
<div class="subhead"><em>Tests</em>:</div>
+
<div class="box">
-<div class="subhead"><b><a href="../test/unit-tests-with-jquery.html">JsRender unit tests - with jQuery</a></b></div>
-<div class="subhead"><b><a href="../test/unit-tests-no-jquery.html">JsRender unit tests - without jQuery</a></b></div>
-<a href="../test/perf-compare.html">Perf comparison</a><br />
+ <div class="subhead"><b><a href="../test/unit-tests-with-jquery.html">JsRender unit tests - with jQuery</a></b></div>
+ <div class="subhead"><b><a href="../test/unit-tests-no-jquery.html">JsRender unit tests - without jQuery</a></b></div>
+ <div><a href="../test/perf-compare.html">Perf comparison</a></div>
</div>
<div class="subhead">See also on <em>JsViews</em> site:</div>
+
+<div class="box">
+ <div class="desc">JsViews are interactive data-driven views, built on top of JsRender templates</div>
+ <div class="subhead"><b><a href="http://borismoore.github.com/jsviews/demos/index.html">JsViews: Demos</a></b></div>
+ <div class="label">JsViews and JsRender Overview:</div>
+ <div class="subhead"><b><a href="http://borismoore.github.com/jsviews/demos/jQueryConfDemosOct2011/index.html" >Demo sequence from jQuery Conference October 2011</a></b></div>
+</div>
+
+<div class="subhead">Other links:</div>
+
<div class="box">
-<div class="desc">JsViews are interactive data-driven views, built on top of JsRender templates</div>
-<div class="subhead"><b><a href="http://borismoore.github.com/jsviews/demos/jQueryConfDemosOct2011/index.html">jQuery Conference October 2011: Demo sequence</a></b></div>
-<div class="subhead"><b><a href="http://borismoore.github.com/jsviews/demos/index.html">JsViews: Demos</a></b></div>
+ <div><a href="http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates" >Slide deck: jQuery Conference October 2011</a></div>
+ <div><a href="http://msdn.microsoft.com/en-us/magazine/hh882454.aspx" >MSDN 'Client Insight' article on JsRender</a></div>
</div>
+
</body>
</html>
View
15 demos/resources/demos.css
@@ -3,10 +3,15 @@ h4 { font-size: inherit`; font-variant: small-caps; }
.height { width: 100%; margin-bottom:10px; float: left; clear: both; }
.bottom { height:400px; width: 100%; margin-bottom:10px; float: left; clear: both; }
body > button { float: left; clear: right; margin: 3px }
-.subhead { margin: 3px 0 10px 0; font-weight:bolder; color:#116; font-family:Arial; font-size:10pt }
-a { color: #55b}
+.subhead { margin: 3px 0 5px 0; font-weight:bolder; color:#116; font-family:Arial; font-size:10pt }
+a { color: #55b; }
pre { font-size:10pt; font-weight:bold; }
.inset { padding-left: 18px; }
-.box { border: 1px solid #777; padding: 5px; margin: 10px 0 30px; }
-.desc { font-style:italic; margin: 0 0 15px; }
-pre { border-left: 3px solid #aaa; padding:10px; margin-bottom: 30px;}
+.box { border: 1px solid #777; padding: 5px; margin: 5px 0 30px; }
+.box div { margin: 3px 0 10px 0; }
+.box .label { margin: 0; padding: 10px 0 0 0; font-style:italic; color: #55b; }
+.box.label { font-style:italic; color: #55b; }
+.desc { font-style:italic; margin: 0 0 15px; color:#116; }
+pre { border-left: 3px solid #aaa; padding:10px; margin-bottom: 30px; }
+.indexitems { list-style-type:none; padding-left:10px; margin: 0 0 20px;}
+h3 { margin-bottom: 10px; font-size: 11pt;}
View
4 demos/resources/movielist.css
@@ -1,7 +1,7 @@
table { border-collapse: collapse; }
table tr { color: blue; height: 25px; }
-.header { color: #009; border-bottom: solid #77c 2px; background-color: #E8E8F7; }
-.header th { padding:5px; border: 1px solid #77c; }
+thead tr { color: #009; border-bottom: solid #77c 2px; background-color: #E8E8F7; }
+thead th { padding:5px; border: 1px solid #77c; }
#movieList tr td:first-child { width: 130px; }
table { border: 2px solid blue; width: 520px; margin: 4px 0 24px 4px; padding: 2px; background-color: #f8f8f8; }
table td { padding: 3px; margin: 3px; border: solid #77c 1px; }
View
17 ...p-by-step/11_default-values-scenario.html → ...scenarios/01_default-values-scenario.html
@@ -11,7 +11,7 @@
</style>
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Example Scenario: providing default values for data.</h3>
@@ -23,7 +23,8 @@
{{:languages||'Languages unavailable'}}
</pre>
-<table><tr class="header"><th>Title</th><th>{{:path}}</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>{{:path}}</th></tr></thead>
<tbody id="movieList1"></tbody>
</table>
@@ -35,13 +36,14 @@
{{get languages defaultValue="No languages!"/}}
$.views.tags({
- get: function( value ){
- return value || this.props.defaultValue;
- }
+ get: function( value ){
+ return value || this.props.defaultValue;
+ }
});
</pre>
-<table><tr class="header"><th>Title</th><th>{{get path default="..."}}</th></tr></tbody>
+<table>
+ <thead><tr><th>Title</th><th>{{get path default="..."}}</th></tr></thead>
<tbody id="movieList2"></tbody>
</table>
@@ -59,7 +61,8 @@
});
</pre>
-<table><tr class="header"><th>Title</th><th>{{yesNo path yes="..." no="..."}}</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>{{yesNo path yes="..." no="..."}}</th></tr></thead>
<tbody id="movieList3"></tbody>
</table>
View
22 .../step-by-step/13_separators-scenario.html → demos/scenarios/02_separators-scenario.html
@@ -8,7 +8,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Example Scenario: Inserting "and" and "," separators between words</h3>
@@ -35,7 +35,8 @@
</tr>
</script>
-<table><tr class="header"><th>Title</th><th>Languages</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList1"></tbody>
</table>
@@ -63,7 +64,8 @@
</script>
-<table><tr class="header"><th>Title</th><th>Languages</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList2"></tbody>
</table>
<br />
@@ -72,11 +74,11 @@
<h3>Using "allowCode"</h3>
-<div class="subhead">Note: <em>The allowCode feature is powerful, but leads to poor separation of concerns, and poor maintainability.
+<div class="box label">
+<b>Note:</b> The allowCode feature is powerful, but leads to poor separation of concerns, and poor maintainability.
<br />It is therefore only available as an opt-in feature on a per template basis.
<br /><br />The following two examples illustrate its use, but are not the recommended approach. The built-in expression support,
-<br />custom tags, helper functions etc. provide a better solution for almost all scenarios, as in the two examples above.</em></div>
-<br />
+<br />custom tags, helper functions etc. provide a better solution for almost all scenarios, as in the two examples above.</div>
<div class="subhead">Example 3: allowCode, for program flow:</div>
@@ -114,7 +116,8 @@
</tr>
</script>
-<table><tr class="header"><th>Title</th><th>Languages</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList3"></tbody>
</table>
@@ -155,7 +158,8 @@
</tr>
</script>
-<table><tr class="header"><th>Title</th><th>Languages</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList4"></tbody>
</table>
@@ -201,7 +205,7 @@
}
];
- $.templates({
+ $.templates({
movieTmpl1: "#movieTemplate1",
movieTmpl2: "#movieTemplate2",
movieTmpl3: {
View
41 ...12_iterating-through-fields-scenario.html → ...03_iterating-through-fields-scenario.html
@@ -8,21 +8,22 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Example Scenario: Creating custom helpers to iterate through fields</h3>
<!---------------------- First Example ---------------------->
-<div class="subhead">Using a custom {{forFields}} tag:</div>
+<div class="subhead">Using a custom {{fields}} tag:</div>
<pre>
- {{forFields details}}
- &lt;b>{{:~key}}&lt;/b>: {{:#data}}
- {{/forFields}}
+{{fields details}}
+ &lt;b>{{:~key}}&lt;/b>: {{:#data}}
+{{/fields}}
</pre>
-<table><tr class="header"><th>Title</th><th>Details</th></tr></tbody>
+<table>
+ <thead><tr><th>Title</th><th>Details</th></tr></thead>
<tbody id="movieList1"></tbody>
</table>
@@ -31,12 +32,13 @@
<div class="subhead">Using a custom ~getFields() helper function:</div>
<pre>
- {{for ~getFields(details)}}
- &lt;b>{{:key}}&lt;/b>: {{:value}}
- {{/for}}
+{{for ~getFields(details)}}
+ &lt;b>{{:key}}&lt;/b>: {{:value}}
+{{/for}}
</pre>
-<table><tr class="header"><th>Title</th><th>Details</th></tr></tbody>
+<table>
+ <thead><tr><th>Title</th><th>Details</th></tr></thead>
<tbody id="movieList2"></tbody>
</table>
@@ -49,11 +51,11 @@
<tr>
<td>{{:title}}</td>
<td>
- {{forFields details}}
+ {{fields details}}
<div>
<b>{{:~key}}</b>: {{:#data}}
</div>
- {{/forFields}}
+ {{/fields}}
</td>
</tr>
</script>
@@ -76,21 +78,20 @@
<script type="text/javascript">
$.views.tags({
- forFields: function( object ) {
- var key,
+ fields: function( object ) {
+ var key,
ret = "";
for ( key in object ) {
if ( object.hasOwnProperty( key )) {
// For each property/field, render the content of the {{fields object}} tag, with "~key" as template parameter
ret += this.renderContent( object[ key ], { key: key });
- }
+ }
}
- // Return the array, to be rendered used {{for ~fields(object)}}
return ret;
}
});
- //Define a custom getFields helper function to iterate over fields and return
+ //Define a custom getFields helper function to iterate over fields and return
$.views.helpers({
getFields: function( object ) {
var key, value,
@@ -113,15 +114,15 @@
var movies = [
{
title: "Meet Joe Black",
- details: {
+ details: {
director: "John",
date: "1996",
- language: "English"
+ language: "English"
}
},
{
title: "Eyes Wide Shut",
- details: {
+ details: {
type: "Comedy",
date: "1940"
}
View
130 demos/scenarios/04_assigning-variables-scenario.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="http://code.jquery.com/jquery.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="../demos.html">JsRender Demos</a><br />
+
+<h3>Example Scenario: Custom tag and helper for assigning/getting local variables.</h3>
+
+<div class="box label">
+<b>Note:</b> This scenario implies understanding the processing sequence of template rendering,
+<br />and is somewhat in contradiction with the 'logicless' and declarative philosophy.
+<br />However it illustrates the power of the custom tags and helper function extensibility,
+<br />and is useful in certain advanced scenarios.
+</div>
+
+<div class="subhead">Declare <em>setvar</em> custom tag and <em>getvar</em> custom helper function</div>
+<pre>
+var vars = {};
+
+$.views.tags({
+ setvar: function(key, value) {
+ ...
+ vars[key] = value;
+ ...
+ }
+});
+
+$.views.helpers({
+ getvar: function(key) {
+ return vars[key];
+ }
+})
+</pre>
+
+<div class="subhead">Use <em>{{setvar}}</em> to assign values or rendered content to variable</div>
+<pre>
+{{setvar "summary" languages/}}
+</pre>
+
+<pre>
+{{setvar "summary"}}
+ &lt;b>Subtitles only:&lt;/b> {{:subtitles}}
+{{/setvar}}
+</pre>
+
+
+<div class="subhead">Use <em>{{:~getvar}}</em> to take values stored in the variable, and render them elsewhere in the template</div>
+<pre>
+{{:~getvar('summary')}}
+</pre>
+
+<script id="movieTemplate" type="text/x-jsrender">
+ <tr>
+ <td>{{:title}}</td>
+ <td>
+ {{if languages}}
+ {{setvar "summary" languages/}}
+
+ Alternative languages: <em>{{:languages}}</em>.
+ {{else}}
+ {{setvar "summary"}}
+ <b>Subtitles only:</b> {{:subtitles}}
+ {{/setvar}}
+
+ Subtitles only. See summary column:
+ {{/if}}
+ </td>
+ <td>
+ <em>{{:title}}:</em><br/>
+ {{:~getvar('summary')}}
+ </td>
+ </tr>
+</script>
+
+<table>
+ <thead><tr><th>title</th><th>languages</th><th>summary</th></tr></thead>
+ <tbody id="movieList"></tbody>
+</table>
+
+<script type="text/javascript">
+
+ var movies = [
+ {
+ title: "Meet Joe Black",
+ languages: "English and French"
+ },
+ {
+ title: "Eyes Wide Shut",
+ subtitles: "French and Spanish"
+ },
+ {
+ title: "City Hunter",
+ languages: "Mandarin and Chinese"
+ }
+ ];
+
+ (function() {
+ var vars = {};
+
+ $.views.tags({
+ setvar: function(key, value) {
+ if (value) {
+ vars[key] = value;
+ } else {
+ vars[key] = this.renderContent(this.view);
+ }
+ }
+ });
+
+ $.views.helpers({
+ getvar: function(key) {
+ return vars[key];
+ }
+ })
+ })();
+
+ $( "#movieList" ).html(
+ $( "#movieTemplate" ).render( movies )
+ );
+
+</script>
+
+</body>
+</html>
View
2 demos/step-by-step/01_inserting-data.html
@@ -6,7 +6,7 @@
<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Render template against local data</h3>
View
2 demos/step-by-step/02_compiling-templates-from-strings.html
@@ -8,7 +8,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Compiling templates from strings</h3>
View
5 demos/step-by-step/03_no-encoding.html
@@ -13,7 +13,7 @@
</style>
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Using {{: }} or {{> }} to render data values with optional conversion or HTML encoding</h3>
@@ -32,7 +32,8 @@
</tr>
</script>
-<table><tr class="header"><th>title</th><th>No Convert</th><th>HTML Encode</th></tr>
+<table>
+ <thead><tr><th>title</th><th>No Convert</th><th>HTML Encode</th></tr></thead>
<tbody id="movieList"></tbody>
</table>
View
5 demos/step-by-step/04_if-else-tag.html
@@ -8,7 +8,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Using {{if}} and {{else}} to render conditional sections.</h3>
@@ -27,7 +27,8 @@
</tr>
</script>
-<table><tbody class="header"><tr><th>title</th><th>languages</th></tr></tbody>
+<table>
+ <thead><tr><th>title</th><th>languages</th></tr></thead>
<tbody id="movieList"></tbody>
</table>
View
5 demos/step-by-step/05_for-tag.html
@@ -8,7 +8,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Using {{for}} to render hierarchical data - inline nested template.</h3>
@@ -25,7 +25,8 @@
</tr>
</script>
-<table><tr class="header"><th>Title</th><th>Languages</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList"></tbody>
</table>
View
18 demos/step-by-step/06_template-composition.html
@@ -8,9 +8,9 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
-<h3>Using {{for}} to render hierarchical data - external template.</h3>
+<h3>Template composition. Using external templates for block tags, such as {{for}} and {{if}}.</h3>
<script id="movieTemplate" type="text/x-jsrender">
<tr>
@@ -21,6 +21,9 @@
<td>
{{for languages tmpl=tmpl/}}
</td>
+ <td>
+ {{for languages tmpl='#conditionalTemplate'/}}
+ </td>
</tr>
</script>
@@ -36,7 +39,14 @@
</span>
</script>
-<table><tr class="header"><th>Synopsis</th><th>Fixed Template</th><th>Template specified in data</th></tr>
+<script id="conditionalTemplate" type="text/x-jsrender">
+ {{if name.charAt(0)==='E' tmpl='#rowTemplate'}}
+ {{else tmpl='#columnTemplate'}}
+ {{/if}}
+</script>
+
+<table>
+ <thead><tr><th>Synopsis</th><th>Fixed Template</th><th>Template specified in data</th><th>Conditional Template</th></tr></thead>
<tbody id="movieList"></tbody>
</table>
@@ -55,7 +65,7 @@
title: "Eyes Wide Shut",
languages: [
{ name: "French" },
- { name: "German" },
+ { name: "Esperanto" },
{ name: "Spanish" }
],
tmpl: "#rowTemplate"
View
2 demos/step-by-step/07_paths.html
@@ -6,7 +6,7 @@
<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Accessing paths</h3>
View
5 demos/step-by-step/08_custom-tags.html
@@ -8,7 +8,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Custom tags</h3>
@@ -57,7 +57,8 @@
<div>{{:name}}</div>
</script>
-<table><tr class="header"><th>Title</th><th>Languages</th><th>Reverse order</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>Languages</th><th>Reverse order</th></tr></thead>
<tbody id="movieList"></tbody>
</table>
View
5 demos/step-by-step/09_helper-functions.html
@@ -8,7 +8,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Helper functions</h3>
@@ -42,7 +42,8 @@
</tr>
</script>
-<table><tr class="header"><th>Title</th><th>Languages</th></tr></tbody>
+<table>
+ <thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList"></tbody>
</table>
View
5 demos/step-by-step/10_comparison-tests.html
@@ -8,7 +8,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Comparison tests</h3>
@@ -36,7 +36,8 @@
<b>Warning:</b> <em>No alternate languages</em>
</script>
-<table><tr class="header"><th>Title</th><th>{{if !(languages && languages.length)}}</th><th>{{if a==null}}</th></tr>
+<table>
+ <thead><tr><th>Title</th><th>{{if !(languages && languages.length)}}</th><th>{{if a==null}}</th></tr></thead>
<tbody id="movieList"></tbody>
</table>
View
7 demos/step-by-step/14_layout-templates.html → demos/step-by-step/11_layout-templates.html
@@ -8,7 +8,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>Using layout templates to render arrays along with headers or footers.</h3>
@@ -44,10 +44,10 @@
<!--================ Demo ================-->
<script id="movieTemplate" type="text/x-jsrender">
- <tbody class="header">
+ <thead>
<tr><th colspan="2">{{:length}} movies available:</th></tr>
<tr><th>Title</th><th>Languages</th></tr>
- </tbody>
+ </thead>
<tbody>
{{for #data}}
<tr>
@@ -74,6 +74,7 @@
</td>
</tr>
{{/for}}
+ <tbody>
</script>
<table id="movieList"></table>
View
4 demos/step-by-step/15_without-jquery.html → demos/step-by-step/20_without-jquery.html
@@ -7,7 +7,7 @@
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
-<a href="index.html">Home</a><br />
+<a href="../demos.html">JsRender Demos</a><br />
<h3>JsRender without jQuery</h3>
@@ -83,7 +83,7 @@
});
document.getElementById( "movieList" ).innerHTML =
- "<table><tbody><tr class='header'><th>Title</th><th>Original order</th><th>Reverse order</th></tr>" + jsviews.render.movieTemplate( movies ) + "</tbody></table>";
+ "<table><thead><tr><th>Title</th><th>Original order</th><th>Reverse order</th></tr></thead><tbody>" + jsviews.render.movieTemplate( movies ) + "</tbody></table>";
</script>
</body>
View
29 demos/step-by-step/index.html
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<title>JsRender: Step by step</title>
-<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-
-<a href="../index.html">Index</a><br />
-
-<h3>JsRender - step-by-step samples</h3>
-
-<a href="01_inserting-data.html">Inserting data values</a><br />
-<a href="02_compiling-templates-from-strings.html">Compiling templates from strings</a><br />
-<a href="03_no-encoding.html">{{: }} and {{> }}</a><br />
-<a href="04_if-else-tag.html">{{if}} and {{else}}</a><br />
-<a href="05_for-tag.html">{{for}}</a><br />
-<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-functions.html">'Helper' functions</a><br />
-<a href="10_comparison-tests.html">Comparison tests</a><br />
-<a href="11_default-values-scenario.html">'Default values' scenario</a><br />
-<a href="12_iterating-through-fields-scenario.html">'Iterating through fields' scenario</a><br />
-<a href="13_separators-scenario.html">'Separators' scenario</a><br />
-<a href="14_layout-templates.html">Layout templates</a><br />
-<a href="15_without-jquery.html">JsRender without jQuery</a><br />
-</body>
-</html>
View
13 jsrender.js
@@ -6,7 +6,7 @@
* Copyright 2012, Boris Moore
* Released under the MIT License.
*/
-// informal pre beta commit counter: 4
+// informal pre beta commit counter: 5
this.jsviews || this.jQuery && jQuery.views || (function( window, undefined ) {
@@ -276,7 +276,6 @@ function converters( name, converterFn ) {
//=================
// renderContent
//=================
-var foo = /\{\{(?:(?:(\w+(?=[\/\s\}]))|(?:(\w+)?(:)|(>)|(\*)))\s*((?:[^\}]|\}(?!\}))*?)(\/)?|(?:\/(\w+)))\}\}/g
function renderContent( data, context, parentView, path, index ) {
// Render template against data as a tree of subviews (nested template), or as a string (top-level template).
@@ -634,8 +633,16 @@ function compile( name, tmpl, parent, options ) {
// Return the template object, if already compiled, or the markup string
if ( ("" + value === value) || value.nodeType > 0 ) {
+ try {
+ elem = value.nodeType > 0
+ ? value
+ : !rTmplString.test( value )
+ // If value is a string and does not contain HTML or tag content, then test as selector
+ && jQuery && jQuery( value )[0];
// If selector is valid and returns at least one element, get first element
- elem = value.nodeType > 0 ? value : !rTmplString.test( value ) && jQuery && jQuery( value )[0];
+ // If invalid, jQuery will throw. We will stay with the original string.
+ } catch(e) {}
+
if ( elem && elem.type ) {
// It is a script element
// Create a name for data linking if none provided
View
36 test/perf-compare.html
@@ -83,14 +83,17 @@
test( "jQuery Template", times * 500, 1, function() {
ret = tmpl_jQueryTmpl($, { data: movie }).join("");
});
- test( "JsRender", times * 500, 1, function() {
- ret = tmpl_JsRender.fn( movie );
+ test( "doT", times * 500, 1, function() {
+ ret = tmpl_doT(movie);
});
test( "Handlebars", times * 500, 1, function() {
ret = tmpl_handlebars(movie);
});
- test( "doT", times * 500, 1, function() {
- ret = tmpl_doT(movie);
+ test( "JsRender <em>(optimized .fn() method - for simple templates)</em>", times * 500, 1, function() {
+ ret = tmpl_JsRender.fn( movie );
+ });
+ test( "JsRender <em>(.render() method - full view-hierarchy features)</em>", times * 500, 1, function() {
+ ret = tmpl_JsRender.render( movie );
});
// Test html encoding perf
@@ -100,30 +103,27 @@
test( "jQuery Template", times * 50, 1, function() {
ret = tmpl_jQueryTmplEncode($, { data: movie }).join("");
});
- test( "JsRender", times * 50, 1, function() {
- ret = tmpl_JsRenderEncode.fn( movie );
+ test( "doT", times * 50, 1, function() {
+ ret = tmpl_doTEncode( movie );
});
test( "Handlebars", times * 50, 1, function() {
ret = tmpl_handlebarsEncode( movie );
});
- test( "doT", times * 50, 1, function() {
- ret = tmpl_doTEncode( movie );
+ test( "JsRender <em>(optimized .fn() method)</em>", times * 50, 1, function() {
+ ret = tmpl_JsRenderEncode.fn( movie );
});
// Test full features perf
$( "#results" ).append( "<tr><td colspan='2'>______________________________________________</td></tr>" );
$( "#results" ).append( "<tr><td colspan='2'><b>Full features - view hierarchy etc.</b></td></tr>");
- test( "JsRender full features - to string", times * 100, 0, function() {
- ret = tmpl_JsRender.render( movie );
- });
- test( "JsRender full features - inserted in DOM", times * 5, 0, function() {
- $( "#output" ).html( tmpl_JsRender.render( movie ));
- });
test( "jQuery Template full features - inserted in DOM", times * 5, 0, function() {
$( "#output" ).empty();
$.tmpl( tmpl_jQueryTmpl, movie ).appendTo( "#output" );
});
+ test( "JsRender full features - inserted in DOM", times * 5, 0, function() {
+ $( "#output" ).html( tmpl_JsRender.render( movie ));
+ });
// Test compile perf
$( "#results" ).append( "<tr><td colspan='2'>______________________________________________</td></tr>" );
@@ -132,16 +132,16 @@
test( "jQuery Template compile", times * 5, 0, function() {
tmpl_jQueryTmpl = $.template( jqueryTmplTemplate );
});
- test( "JsRender compile", times * 5, 0, function() {
- tmpl_JsRender = $.templates( "test", jsRenderTemplate );
+ test( "doT compile", times * 5, 0, function() {
+ tmpl_doT = doT.template( dotTemplate );
});
test( "Handlebars compile", times * 5, 0, function() {
var tmpl = Handlebars.compile( handlebarsTemplateEncode );
// For Handlebars, make initial rendering call to do first compilation.
tmpl( movie );
});
- test( "doT compile", times * 5, 0, function() {
- tmpl_doT = doT.template( dotTemplate );
+ test( "JsRender compile", times * 5, 0, function() {
+ tmpl_JsRender = $.templates( "test", jsRenderTemplate );
});
$( "#results" ).append( "<tr><td colspan='2'>______________________________________________</td></tr>" );
View
4 test/unit/jsrender-tests-no-jquery.js
@@ -196,7 +196,7 @@ test("{{for}}", function() {
equal( jsviews.templates( "{{for people towns}}{{:name}}{{/for}}" ).render({ people: people, towns: towns }), "JoBillSeattleParisDelhi", "concatenated targets: {{for people towns}}" );
equal( jsviews.render.simpleFor({people:[]}), "ab", 'Empty array renders empty string' );
- equal( jsviews.render.simpleFor({people:[null,undefined,1]}), "aContentContentContentb", 'null or undefined members of array are also rendered' );
+ equal( jsviews.render.simpleFor({people:["",false,null,undefined,1]}), "aContentContentContentContentContentb", 'Empty string, false, null or undefined members of array are also rendered' );
equal( jsviews.render.simpleFor({people:null}), "ab", 'null is rendered as empty string' );
equal( jsviews.render.simpleFor({}), "ab", 'undefined is rendered as empty string' );
equal( jsviews.render.forPrimitiveDataTypes({people:[0,1,"abc","",,true,false]}), "a01abctruefalseb", 'Primitive types render correctly, even if falsey' );
@@ -276,7 +276,7 @@ test("render", function() {
equal( jsviews.templates( tmplString ).render( person ), "A_Jo_B", 'Compile from string: var html = jsviews.templates( tmplString ).render( data );' );
equal( jsviews.render.myTmpl8( people ), "A_Jo_BA_Bill_B", 'jsviews.render.myTmpl( array );' );
equal( jsviews.render.simple([]), "", 'Empty array renders empty string' );
- equal( jsviews.render.simple([null,undefined,1]), "ContentContentContent", 'null or undefined members of array are also rendered' );
+ equal( jsviews.render.simple(["",false,null,undefined,1]), "ContentContentContentContentContent", 'Empty string, false, null or undefined members of array are also rendered' );
equal( jsviews.render.simple(null), "", 'null renders as empty string' );
equal( jsviews.render.simple(), "", 'Undefined renders as empty string' );

0 comments on commit c7ce2c6

Please sign in to comment.