Reorganized demo pages.

jmmaranan · Apr 20, 2012 · 4d1abee · 4d1abee
1 parent fc9ff01
commit 4d1abee
Show file tree

Hide file tree

Showing 35 changed files with 192 additions and 258 deletions.
diff --git a/demos/demos.html b/demos/demos.html
@@ -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>
diff --git a/demos/index.html b/demos/index.html
@@ -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>
diff --git a/demos/jQueryConfDemosOct2011/01_render-template.html b/demos/jQueryConfDemosOct2011/01_render-template.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>

diff --git a/demos/jQueryConfDemosOct2011/02_template-from-string.html b/demos/jQueryConfDemosOct2011/02_template-from-string.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="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>

diff --git a/demos/jQueryConfDemosOct2011/03_compiled-template.html b/demos/jQueryConfDemosOct2011/03_compiled-template.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="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>

diff --git a/demos/jQueryConfDemosOct2011/04_data-array.html b/demos/jQueryConfDemosOct2011/04_data-array.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="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>

diff --git a/demos/jQueryConfDemosOct2011/05_input.html b/demos/jQueryConfDemosOct2011/05_input.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="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>

diff --git a/demos/jQueryConfDemosOct2011/06_data-binding.html b/demos/jQueryConfDemosOct2011/06_data-binding.html
@@ -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>

diff --git a/demos/jQueryConfDemosOct2011/06_data-binding2.html b/demos/jQueryConfDemosOct2011/06_data-binding2.html
@@ -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>

diff --git a/demos/jQueryConfDemosOct2011/07_observable.html b/demos/jQueryConfDemosOct2011/07_observable.html
@@ -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>
 

diff --git a/demos/jQueryConfDemosOct2011/07_observable2.html b/demos/jQueryConfDemosOct2011/07_observable2.html
@@ -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>
 

diff --git a/demos/jQueryConfDemosOct2011/07_observable3.html b/demos/jQueryConfDemosOct2011/07_observable3.html
@@ -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>
 

diff --git a/demos/jQueryConfDemosOct2011/08_for-tag.html b/demos/jQueryConfDemosOct2011/08_for-tag.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="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>

diff --git a/demos/jQueryConfDemosOct2011/09_for-composition.html b/demos/jQueryConfDemosOct2011/09_for-composition.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="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>

diff --git a/demos/jQueryConfDemosOct2011/10_if-else-tag.html b/demos/jQueryConfDemosOct2011/10_if-else-tag.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="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>

diff --git a/demos/jQueryConfDemosOct2011/11_editable-data.html b/demos/jQueryConfDemosOct2011/11_editable-data.html
@@ -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>