Permalink
Browse files

Reorganized demo pages, and perf comparison page.

  • Loading branch information...
1 parent 7a3e0e4 commit 4664009e17ac3fc3d4628cbac44015417931fee3 @BorisMoore committed Apr 20, 2012
View
@@ -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
@@ -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>
@@ -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;}
@@ -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>
@@ -36,9 +36,9 @@
{{get languages defaultValue="No languages!"/}}
$.views.tags({
- get: function( value ){
- return value || this.props.defaultValue;
- }
+ get: function( value ){
+ return value || this.props.defaultValue;
+ }
});
</pre>
@@ -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>
@@ -74,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>
@@ -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: Creating custom helpers to iterate through fields</h3>
@@ -17,9 +17,9 @@
<div class="subhead">Using a custom {{fields}} tag:</div>
<pre>
- {{fields details}}
- &lt;b>{{:~key}}&lt;/b>: {{:#data}}
- {{/fields}}
+{{fields details}}
+ &lt;b>{{:~key}}&lt;/b>: {{:#data}}
+{{/fields}}
</pre>
<table>
@@ -32,9 +32,9 @@
<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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>Template composition. Using external templates for block tags, such as {{for}} and {{if}}.</h3>
@@ -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>
Oops, something went wrong.

0 comments on commit 4664009

Please sign in to comment.