Skip to content

Commit

Permalink
Merge branch 'master' into warn_about_src
Browse files Browse the repository at this point in the history
  • Loading branch information
@patmoore
patmoore committed Apr 23, 2012
2 parents f082766 + 4664009 commit c242fd1
Show file tree
Hide file tree
Showing 24 changed files with 319 additions and 130 deletions.
39 changes: 39 additions & 0 deletions demos/demos.html
View file
@@ -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>
34 changes: 23 additions & 11 deletions demos/index.html
View file
@@ -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>
15 changes: 10 additions & 5 deletions demos/resources/demos.css
View file
Expand Up @@ -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;}
4 changes: 2 additions & 2 deletions demos/resources/movielist.css
View file
@@ -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; }
17 changes: 10 additions & 7 deletions ...p-by-step/11_default-values-scenario.html → ...scenarios/01_default-values-scenario.html
View file
Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand Down
22 changes: 13 additions & 9 deletions .../step-by-step/13_separators-scenario.html → demos/scenarios/02_separators-scenario.html
View file
Expand Up @@ -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>

Expand All @@ -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>

Expand Down Expand Up @@ -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 />
Expand All @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -201,7 +205,7 @@ <h3>Using "allowCode"</h3>
}
];

$.templates({
$.templates({
movieTmpl1: "#movieTemplate1",
movieTmpl2: "#movieTemplate2",
movieTmpl3: {
Expand Down
41 changes: 21 additions & 20 deletions ...12_iterating-through-fields-scenario.html → ...03_iterating-through-fields-scenario.html
View file
Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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>
Expand All @@ -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,
Expand All @@ -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"
}
Expand Down

0 comments on commit c242fd1

Please sign in to comment.