Permalink
Browse files

Reorganized demo pages.

  • Loading branch information...
1 parent fc9ff01 commit 4d1abeefb0b23e2dad7b0ae0036ebf49fc2d773a @BorisMoore committed Apr 20, 2012
Showing with 192 additions and 258 deletions.
  1. +24 −0 demos/demos.html
  2. +19 −8 demos/index.html
  3. +5 −5 demos/jQueryConfDemosOct2011/01_render-template.html
  4. +5 −5 demos/jQueryConfDemosOct2011/02_template-from-string.html
  5. +5 −5 demos/jQueryConfDemosOct2011/03_compiled-template.html
  6. +5 −5 demos/jQueryConfDemosOct2011/04_data-array.html
  7. +5 −5 demos/jQueryConfDemosOct2011/05_input.html
  8. +5 −5 demos/jQueryConfDemosOct2011/06_data-binding.html
  9. +5 −5 demos/jQueryConfDemosOct2011/06_data-binding2.html
  10. +5 −5 demos/jQueryConfDemosOct2011/07_observable.html
  11. +5 −5 demos/jQueryConfDemosOct2011/07_observable2.html
  12. +5 −5 demos/jQueryConfDemosOct2011/07_observable3.html
  13. +5 −5 demos/jQueryConfDemosOct2011/08_for-tag.html
  14. +5 −5 demos/jQueryConfDemosOct2011/09_for-composition.html
  15. +5 −5 demos/jQueryConfDemosOct2011/10_if-else-tag.html
  16. +2 −2 demos/jQueryConfDemosOct2011/11_editable-data.html
  17. +5 −5 demos/jQueryConfDemosOct2011/12_helper-functions.html
  18. +5 −5 demos/jQueryConfDemosOct2011/13_converters.html
  19. +4 −4 demos/jQueryConfDemosOct2011/14_custom-tags.html
  20. +0 −94 demos/jQueryConfDemosOct2011/15_allow-code.html
  21. +24 −21 demos/jQueryConfDemosOct2011/index.html
  22. BIN demos/jQueryConfDemosOct2011/resources/close.png
  23. +10 −4 demos/resources/demos.css
  24. 0 demos/{jQueryConfDemosOct2011 → }/resources/perf-compare.css
  25. 0 demos/{jQueryConfDemosOct2011 → }/resources/presentation.css
  26. 0 demos/{jQueryConfDemosOct2011 → }/resources/syntaxhighlighter.css
  27. +1 −1 demos/{jQueryConfDemosOct2011 → }/resources/syntaxhighlighter.min.js
  28. +20 −17 demos/step-by-step/01_rendering-and-linking.html
  29. +1 −1 demos/step-by-step/02_accordion_switching-template.html
  30. +1 −1 demos/step-by-step/03_tree-view_recursive-nested-each.html
  31. +1 −1 demos/step-by-step/04_editable-data.html
  32. +1 −1 demos/step-by-step/05_server-rendered_client-activated.html
  33. +8 −6 demos/step-by-step/06_top-level-linking.html
  34. +1 −0 demos/step-by-step/10_todos.html
  35. +0 −22 demos/step-by-step/index.html
View
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>JsViews: Step by step</title>
+<link href="resources/demos.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<div class="subhead"><< <a href="index.html">Index for JsViews and JsRender</a></div>
+
+<h2>JsViews: Demos</h2>
+
+<ul class="indexitems">
+ <li><a href="step-by-step/01_rendering-and-linking.html">Rendering and linking</a></li>
+ <li><a href="step-by-step/02_accordion_switching-template.html">Switch templates: Accordion</a></li>
+ <li><a href="step-by-step/03_tree-view_recursive-nested-each.html">Recursive Tree View - {{for}}</a></li>
+ <li><a href="step-by-step/04_editable-data.html">Full declarative data-linking with <em>'observable'</em> editable data and arrays</a></li>
+ <li><a href="step-by-step/05_server-rendered_client-activated.html">Server-render then client-activate</a></li>
+ <li><a href="step-by-step/06_top-level-linking.html">Top-level data-linking</a></li>
+ <li><a href="step-by-step/10_todos.html">Todos sample app</a></li>
+</ul>
+
+</body>
+</html>
View
@@ -9,18 +9,29 @@
<h2>JsViews: Next-generation jQuery Templates and Data Linking</h2>
<div class="subhead"><em>JsViews</em>:</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="step-by-step/index.html">JsViews: step-by-step samples</a></b></div>
-<div class="subhead"><b><a href="jQueryConfDemosOct2011/index.html">jQuery Conference October 2011: Demo sequence</a></b></div>
-<span class="subhead">Source code:</span>
-<a href="https://github.com/BorisMoore/jsviews">https://github.com/BorisMoore/jsviews</a>
+ <div class="desc">JsViews are interactive data-driven views, built on top of JsRender templates</div>
+ <div class="subhead"><b><a href="demos.html">JsViews: Demos</a></b></div>
+ <div class="label">JsViews and JsRender Overview:</div>
+ <div class="subhead"><b><a href="jQueryConfDemosOct2011/index.html" >Demo sequence from jQuery Conference October 2011</a></b></div>
+ <div class="label">Source code:</div>
+ <div><a href="https://github.com/BorisMoore/jsviews">https://github.com/BorisMoore/jsviews</a></div>
</div>
<div class="subhead">See also on <em>JsRender</em> site:</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="http://borismoore.github.com/jsrender/demos/index.html">JsRender: Demos</a></b></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="http://borismoore.github.com/jsrender/demos/index.html">JsRender: Demos</a></b></div>
</div>
+
+<div class="subhead">Other links:</div>
+
+<div class="box">
+ <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>
+</html>
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
-<a href="index.html">Home</a> <a href="02_template-from-string.html">Next</a><br />
+<div class="nav">Prev <a href="index.html">Index</a> <a href="02_template-from-string.html">Next</a></div>
-<h3>1 Render template from script block</h3>
+<h3>JsRender: Render template from script block</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
-<a href="01_render-template.html">Prev</a> <a href="index.html">Home</a> <a href="03_compiled-template.html">Next</a><br />
+<div class="nav"><a href="01_render-template.html">Prev</a> <a href="index.html">Index</a> <a href="03_compiled-template.html">Next</a></div>
-<h3>2 Render template from string</h3>
+<h3>JsRender: Render template from string</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
-<a href="02_template-from-string.html">Prev</a> <a href="index.html">Home</a> <a href="04_data-array.html">Next</a><br />
+<div class="nav"><a href="02_template-from-string.html">Prev</a> <a href="index.html">Index</a> <a href="04_data-array.html">Next</a></div>
-<h3>3 Compile template from string</h3>
+<h3>JsRender: Compile template from string</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
-<a href="03_compiled-template.html">Prev</a> <a href="index.html">Home</a> <a href="05_input.html">Next</a><br />
+<div class="nav"><a href="03_compiled-template.html">Prev</a> <a href="index.html">Index</a> <a href="05_input.html">Next</a></div>
-<h3>4 Data Arrays</h3>
+<h3>JsRender: Data Arrays</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
-<a href="04_data-array.html">Prev</a> <a href="index.html">Home</a> <a href="06_data-binding.html">Next</a><br />
+<div class="nav"><a href="04_data-array.html">Prev</a> <a href="index.html">Index</a> <a href="06_data-binding.html">Next</a></div>
-<h3>5 Inputs (without data binding)</h3>
+<h3>JsRender: Inputs (without data binding)</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
<script src="../../jquery.observable.js" type="text/javascript"></script>
<script src="../../jquery.views.js" type="text/javascript"></script>
</head>
<body>
-<a href="05_input.html">Prev</a> <a href="index.html">Home</a> <a href="06_data-binding2.html">Next</a><br />
+<div class="nav"><a href="05_input.html">Prev</a> <a href="index.html">Index</a> <a href="06_data-binding2.html">Next</a></div>
-<h3>6 Data binding: JsViews</h3>
+<h3>JsViews: Data binding</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
<script src="../../jquery.observable.js" type="text/javascript"></script>
<script src="../../jquery.views.js" type="text/javascript"></script>
</head>
<body>
-<a href="06_data-binding.html">Prev</a> <a href="index.html">Home</a> <a href="07_observable.html">Next</a><br />
+<div class="nav"><a href="06_data-binding.html">Prev</a> <a href="index.html">Index</a> <a href="07_observable.html">Next</a></div>
-<h3>7 Data binding: JsViews - compact linking API syntax</h3>
+<h3>JsViews: Data binding - compact linking API syntax</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
<script src="../../jquery.observable.js" type="text/javascript"></script>
<script src="../../jquery.views.js" type="text/javascript"></script>
</head>
<body>
-<a href="06_data-binding2.html">Prev</a> <a href="index.html">Home</a> <a href="07_observable2.html">Next</a><br />
+<div class="nav"><a href="06_data-binding2.html">Prev</a> <a href="index.html">Index</a> <a href="07_observable2.html">Next</a></div>
-<h3>8 Observable property changes: JsViews</h3>
+<h3>JsViews: Observable property changes</h3>
<p><button id="changeName">Change name</button></p>
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
<script src="../../jquery.observable.js" type="text/javascript"></script>
<script src="../../jquery.views.js" type="text/javascript"></script>
</head>
<body>
-<a href="07_observable.html">Prev</a> <a href="index.html">Home</a> <a href="07_observable3.html">Next</a><br />
+<div class="nav"><a href="07_observable.html">Prev</a> <a href="index.html">Index</a> <a href="07_observable3.html">Next</a></div>
-<h3>9 Observable collection changes: JsViews</h3>
+<h3>JsViews: Observable collection changes</h3>
<p><button id="insertPerson">Insert person</button></p>
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
<script src="../../jquery.observable.js" type="text/javascript"></script>
<script src="../../jquery.views.js" type="text/javascript"></script>
</head>
<body>
-<a href="07_observable2.html">Prev</a> <a href="index.html">Home</a> <a href="08_for-tag.html">Next</a><br />
+<div class="nav"><a href="07_observable2.html">Prev</a> <a href="index.html">Index</a> <a href="08_for-tag.html">Next</a></div>
-<h3>10 Two containers data-linked to the same array</h3>
+<h3>JsViews: Two containers data-linked to the same array</h3>
<p><button id="insertPerson">Add people</button></p>
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
-<a href="07_observable3.html">Prev</a> <a href="index.html">Home</a> <a href="09_for-composition.html">Next</a><br />
+<div class="nav"><a href="07_observable3.html">Prev</a> <a href="index.html">Index</a> <a href="09_for-composition.html">Next</a></div>
-<h3>11 Using {{for}} to render hierarchical data - inline nested template</h3>
+<h3>JsRender: Using {{for}} to render hierarchical data - inline nested template</h3>
<script id="movieTemplate" type="text/x-jsrender">
<tr>
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
-<a href="08_for-tag.html">Prev</a> <a href="index.html">Home</a> <a href="10_if-else-tag.html">Next</a><br />
+<div class="nav"><a href="08_for-tag.html">Prev</a> <a href="index.html">Index</a> <a href="10_if-else-tag.html">Next</a></div>
-<h3>12 Composing nested templates: {{for}} with external template</h3>
+<h3>JsRender: Composing nested templates: {{for}} with external template</h3>
<script id="movieTmpl" type="text/x-jsrender">
<tr>
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <link href="resources/presentation.css" rel="stylesheet" type="text/css" />
- <link href="resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
- <script src="resources/syntaxhighlighter.min.js" type="text/javascript"></script>
+ <link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
+ <link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
+ <script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
-<a href="09_for-composition.html">Prev</a> <a href="index.html">Home</a> <a href="11_editable-data.html">Next</a><br />
+<div class="nav"><a href="09_for-composition.html">Prev</a> <a href="index.html">Index</a> <a href="11_editable-data.html">Next</a></div>
-<h3>13 Using {{if}} and {{else}} to render conditional sections</h3>
+<h3>JsRender: Using {{if}} and {{else}} to render conditional sections</h3>
<script id="movieTemplate" type="text/x-jsrender">
<tr>
@@ -10,9 +10,9 @@
<script src="../../jquery.views.js" type="text/javascript"></script>
</head>
<body>
-<a href="10_if-else-tag.html">Prev</a> <a href="index.html">Home</a> <a href="12_helper-functions.html">Next</a><br />
+<div class="nav"><a href="10_if-else-tag.html">Prev</a> <a href="index.html">Index</a> <a href="12_helper-functions.html">Next</a></div>
-<h3>14 Fully editable data: JsViews</h3>
+<h3>JsViews: Fully editable data: JsViews</h3>
<div class="buttons">
<button onclick="showData()">show data</button>
Oops, something went wrong.

0 comments on commit 4d1abee

Please sign in to comment.