Permalink
Browse files

New samples on compiling and accessing templates.

Bug fix for JsViews integration - onRender.
  • Loading branch information...
1 parent 4264cd7 commit 83a7d9a8b2767be60b3345e9db9314a20837439b @BorisMoore committed May 12, 2012
View
@@ -14,7 +14,7 @@
<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/02_compiling-named-templates-from-strings.html">Compiling named 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>
@@ -27,6 +27,12 @@
<li><a href="step-by-step/20_without-jquery.html">JsRender without jQuery</a></li>
</ul>
+<h3>JsRender - variants and details</h3>
+
+<ul class="indexitems">
+ <li><a href="variants/variants.html">Samples: variants and details</a></li>
+</ul>
+
<h3>JsRender - scenario examples</h3>
<ul class="indexitems">
View
@@ -38,9 +38,9 @@
<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>MSDN 'Client Insight' articles on JsRender <a href="http://msdn.microsoft.com/en-us/magazine/hh882454.aspx" >part one</a> and
+ <a href="http://msdn.microsoft.com/en-us/magazine/hh975379.aspx" >part two</a></div>
<div>Training course: <a href="http://johnpapa.net/new-course-on-jsrender-templating-fundamentals-with-javascript" >JsRender Fundamentals</a> from John Papa on <a href="http://pluralsight.net/" >Pluralsight</a> (3 hours of video)</div>
-
</div>
</body>
@@ -10,7 +10,7 @@
<body>
<a href="../demos.html">JsRender Demos</a><br />
-<h3>Compiling templates from strings</h3>
+<h3>Compiling named templates from strings</h3>
<button id="switchBtn">Show full details</button><br/>
<br />
@@ -34,14 +34,19 @@
var details = true;
function switchTemplates() {
- details = !details;
+ var html;
- $( this ).text( details ? "Show titles only" : "Show full details" );
+ details = !details;
/* Render using the other named template */
- var templateName = details ? "detailTemplate" : "titleTemplate";
-
- $( "#movieList" ).html( $.render [ templateName ]( movies ));
+ if ( details ) {
+ $( this ).text( "Show titles only" );
+ html = $.render.detailTemplate( movies );
+ } else {
+ $( this ).text( "Show full details" );
+ html = $.render.titleTemplate( movies );
+ }
+ $( "#movieList" ).html( html );
}
$( "#switchBtn" ).click( switchTemplates );
@@ -0,0 +1,57 @@
+<!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="../variants.html">JsRender Demos: Variants</a><br />
+
+<h3>Compiling template objects from strings</h3>
+
+<div class="subhead"> Variant of <a href="../../step-by-step/02_compiling-named-templates-from-strings.html">Compiling named templates sample</a></div><br />
+
+<button id="switchBtn">Show full details</button><br/>
+<br />
+<table>
+ <tbody id="movieList"></tbody>
+</table>
+
+<script type="text/javascript">
+ var movies = [
+ { name: "The Red Violin", releaseYear: "1998", director: "François Girard" },
+ { name: "Eyes Wide Shut", releaseYear: "1999", director: "Stanley Kubrick" },
+ { name: "The Inheritance", releaseYear: "1976", director: "Mauro Bolognini" }
+ ];
+
+ /* Compile markup as template objects */
+ var titleTemplate = $.templates( "<tr><td colspan=3>{{:name}}</td></tr>" ),
+ detailTemplate = $.templates( "<tr><td>{{:name}}</td><td>Released: {{:releaseYear}}</td><td>director: {{:director}}</td></tr>" ),
+ details = true;
+
+ function switchTemplates() {
+ var html;
+
+ details = !details;
+
+ /* Render using the other compiled template */
+ if ( details ) {
+ $( this ).text( "Show titles only" );
+ html = detailTemplate.render( movies );
+ } else {
+ $( this ).text( "Show full details" );
+ html = titleTemplate.render( movies );
+ }
+ $( "#movieList" ).html( html );
+ }
+
+ $( "#switchBtn" ).click( switchTemplates );
+
+ switchTemplates();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,74 @@
+<!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="../variants.html">JsRender Demos: Variants</a><br />
+
+<h3>Register script block template declarations, as named templates</h3>
+
+<div class="subhead"> Variant of <a href="../../step-by-step/02_compiling-named-templates-from-strings.html">Compiling named templates sample</a></div><br />
+
+<script id="titleTemplate" type="text/x-jsrender">
+ <tr>
+ <td colspan=3>{{:name}}</td>
+ </tr>
+</script>
+
+<script id="detailTemplate" type="text/x-jsrender">
+ <tr>
+ <td>{{:name}}</td>
+ <td>Released: {{:releaseYear}}</td>
+ <td>director: {{:director}}</td>
+ </tr>
+</script>
+
+<button id="switchBtn">Show full details</button><br/>
+<br />
+<table>
+ <tbody id="movieList"></tbody>
+</table>
+
+<script type="text/javascript">
+ var movies = [
+ { name: "The Red Violin", releaseYear: "1998", director: "François Girard" },
+ { name: "Eyes Wide Shut", releaseYear: "1999", director: "Stanley Kubrick" },
+ { name: "The Inheritance", releaseYear: "1976", director: "Mauro Bolognini" }
+ ];
+
+ /* Register script declarations as named templates*/
+ $.templates({
+ titleTemplate: "#titleTemplate",
+ detailTemplate: "#detailTemplate"
+ });
+
+ var details = true;
+
+ function switchTemplates() {
+ var html;
+
+ details = !details;
+
+ /* Render using the other compiled template */
+ if ( details ) {
+ $( this ).text( "Show titles only" );
+ html = $.render.detailTemplate( movies );
+ } else {
+ $( this ).text( "Show full details" );
+ html = $.render.titleTemplate( movies );
+ }
+ $( "#movieList" ).html( html );
+ }
+
+ $( "#switchBtn" ).click( switchTemplates );
+
+ switchTemplates();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,72 @@
+<!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="../variants.html">JsRender Demos: Variants</a><br />
+
+<h3>Getting template objects from script block template declarations</h3>
+
+<div class="subhead"> Variant of <a href="../../step-by-step/02_compiling-named-templates-from-strings.html">Compiling named templates sample</a></div><br />
+
+<script id="titleTemplate" type="text/x-jsrender">
+ <tr>
+ <td colspan=3>{{:name}}</td>
+ </tr>
+</script>
+
+<script id="detailTemplate" type="text/x-jsrender">
+ <tr>
+ <td>{{:name}}</td>
+ <td>Released: {{:releaseYear}}</td>
+ <td>director: {{:director}}</td>
+ </tr>
+</script>
+
+<button id="switchBtn">Show full details</button><br/>
+<br />
+<table>
+ <tbody id="movieList"></tbody>
+</table>
+
+<script type="text/javascript">
+ var movies = [
+ { name: "The Red Violin", releaseYear: "1998", director: "François Girard" },
+ { name: "Eyes Wide Shut", releaseYear: "1999", director: "Stanley Kubrick" },
+ { name: "The Inheritance", releaseYear: "1976", director: "Mauro Bolognini" }
+ ];
+
+ /* Get template objects for the script block template declarations */
+ var titleTemplate = $.templates( "#titleTemplate" ),
+ detailTemplate = $.templates( "#detailTemplate" ),
+
+ details = true;
+
+ function switchTemplates() {
+ var html;
+
+ details = !details;
+
+ /* Render using the other compiled template */
+ if ( details ) {
+ $( this ).text( "Show titles only" );
+ html = detailTemplate.render( movies );
+ } else {
+ $( this ).text( "Show full details" );
+ html = titleTemplate.render( movies );
+ }
+ $( "#movieList" ).html( html );
+ }
+
+ $( "#switchBtn" ).click( switchTemplates );
+
+ switchTemplates();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,103 @@
+<!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="../variants.html">JsRender Demos: Variants</a><br />
+
+<h3>Template composition. Registering and accessing subtemplates.</h3>
+
+<div class="subhead"> Variant of <a href="../../step-by-step/06_template-composition.html">template composition sample</a></div><br />
+
+<script id="movieTemplate" type="text/x-jsrender">
+ <tr>
+ <td>{{:title}}</td>
+ <td>
+ {{for languages tmpl="columnTemplate" ~foo=3/}}
+ </td>
+ <td>
+ {{for languages tmpl=tmpl/}}
+ </td>
+ <td>
+ {{for languages tmpl='conditionalTemplate'/}}
+ </td>
+ </tr>
+</script>
+
+<script id="columnTemplate" type="text/x-jsrender">
+ <div>
+ <em>{{:name}}</em>
+ </div>
+</script>
+
+<script id="rowTemplate" type="text/x-jsrender">
+ <span>
+ <b>{{:name}}</b>
+ </span>
+</script>
+
+<script id="conditionalTemplate" type="text/x-jsrender">
+ {{if name.charAt(0)==='E' tmpl='rowTemplate'}}
+ {{else tmpl='columnTemplate'}}
+ {{/if}}
+</script>
+
+<table>
+ <thead><tr><th>Synopsis</th><th>Fixed Template</th><th>Template specified in data</th><th>Conditional Template</th></tr></thead>
+ <tbody id="movieList"></tbody>
+</table>
+
+<script type="text/javascript">
+
+ var movies = [
+ {
+ title: "Meet Joe Black",
+ languages: [
+ { name: "English" },
+ { name: "French" }
+ ],
+ tmpl: "columnTemplate"
+ },
+ {
+ title: "Eyes Wide Shut",
+ languages: [
+ { name: "French" },
+ { name: "Esperanto" },
+ { name: "Spanish" }
+ ],
+ tmpl: "rowTemplate"
+ },
+ {
+ title: "The Inheritance",
+ languages: [
+ { name: "English" },
+ { name: "German" }
+ ],
+ tmpl: "columnTemplate"
+ }
+ ];
+
+ $.templates( "movieTemplate", {
+ markup: "#movieTemplate",
+ templates: {
+ columnTemplate: "#columnTemplate",
+ rowTemplate: "#rowTemplate",
+ conditionalTemplate: "#conditionalTemplate"
+ }
+ });
+
+ $( "#movieList" ).html(
+ $.render.movieTemplate( movies )
+ );
+
+</script>
+
+</body>
+</html>
+
+
Oops, something went wrong.

0 comments on commit 83a7d9a

Please sign in to comment.