-
Notifications
You must be signed in to change notification settings - Fork 339
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reorganized demo pages, and perf comparison page.
- Loading branch information
1 parent
7a3e0e4
commit 4664009
Showing
21 changed files
with
234 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Original file line | Diff line number | Diff line change |
|---|---|---|---|
| @@ -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> | |||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Original file line | Diff line number | Diff line change |
|---|---|---|---|
| @@ -1,33 +1,45 @@ | |||
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| <html> | <html> | ||
| <head> | <head> | ||
| <title>JsRender: Step by step</title> | <title>JsRender: Demos</title> | ||
| <link href="resources/demos.css" rel="stylesheet" type="text/css" /> | <link href="resources/demos.css" rel="stylesheet" type="text/css" /> | ||
| </head> | </head> | ||
| <body> | <body> | ||
|
|
|
||
| <h2>JsRender: Next-generation jQuery Templates</h2> | <h2>JsRender: Next-generation jQuery Templates</h2> | ||
|
|
|
||
| <div class="subhead"><em>JsRender</em>:</div> | <div class="subhead"><em>JsRender</em>:</div> | ||
|
|
|||
| <div class="box"> | <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="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> | <div class="subhead"><b><a href="demos.html">JsRender: Demos</a></b></div> | ||
| <span class="subhead">Source code:</span> | <div class="label">Source code:</div> | ||
| <a href="https://github.com/BorisMoore/jsrender">https://github.com/BorisMoore/jsrender</a> | <div><a href="https://github.com/BorisMoore/jsrender">https://github.com/BorisMoore/jsrender</a></div> | ||
| </div> | </div> | ||
|
|
|
||
| <div class="subhead"><em>Tests</em>:</div> | <div class="subhead"><em>Tests</em>:</div> | ||
|
|
|||
| <div class="box"> | <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-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 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><a href="../test/perf-compare.html">Perf comparison</a></div> | ||
| </div> | </div> | ||
|
|
|
||
| <div class="subhead">See also on <em>JsViews</em> site:</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="box"> | ||
| <div class="desc">JsViews are interactive data-driven views, built on top of JsRender templates</div> | <div><a href="http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates" >Slide deck: jQuery Conference October 2011</a></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><a href="http://msdn.microsoft.com/en-us/magazine/hh882454.aspx" >MSDN 'Client Insight' article on JsRender</a></div> | ||
| <div class="subhead"><b><a href="http://borismoore.github.com/jsviews/demos/index.html">JsViews: Demos</a></b></div> | |||
| </div> | </div> | ||
|
|
|||
| </body> | </body> | ||
| </html> | </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Original file line | Diff line number | Diff line change |
|---|---|---|---|
| @@ -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"}} | |||
| <b>Subtitles only:</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> | |||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.