Permalink
Browse files

Merge branch 'master' into warn_about_src

  • Loading branch information...
patmoore committed Apr 23, 2012
2 parents f082766 + 4664009 commit c242fd1ba90f25f74e1a25c803834186e5a22dfe
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>
View
@@ -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;}
@@ -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; }
@@ -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 @@ <h3>Example Scenario: providing default values for data.</h3>
{{: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 @@ <h3>Example Scenario: providing default values for data.</h3>
{{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 @@ <h3>Example Scenario: providing default values for data.</h3>
});
</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>
@@ -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 @@ <h3>Example Scenario: Inserting "and" and "," separators between words</h3>
</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 @@ <h3>Example Scenario: Inserting "and" and "," separators between words</h3>
</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>Example Scenario: Inserting "and" and "," separators between words</h3>
<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 @@ <h3>Using "allowCode"</h3>
</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 @@ <h3>Using "allowCode"</h3>
</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 @@ <h3>Using "allowCode"</h3>
}
];
- $.templates({
+ $.templates({
movieTmpl1: "#movieTemplate1",
movieTmpl2: "#movieTemplate2",
movieTmpl3: {
@@ -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 @@ <h3>Example Scenario: Creating custom helpers to iterate through fields</h3>
<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 @@ <h3>Example Scenario: Creating custom helpers to iterate through fields</h3>
<tr>
<td>{{:title}}</td>
<td>
- {{forFields details}}
+ {{fields details}}
<div>
<b>{{:~key}}</b>: {{:#data}}
</div>
- {{/forFields}}
+ {{/fields}}
</td>
</tr>
</script>
@@ -76,21 +78,20 @@ <h3>Example Scenario: Creating custom helpers to iterate through fields</h3>
<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 @@ <h3>Example Scenario: Creating custom helpers to iterate through fields</h3>
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"
}
Oops, something went wrong.

0 comments on commit c242fd1

Please sign in to comment.