Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Updated Readme with info about beta status. Added/improved three samples

in step-by-step demos, showing how to access parent data, or pass template
parameters to nested templates or block tags.
See jsrender/demos/step-by-step/11, 12 and 13.
  • Loading branch information...
commit 734d3bd4d135106fa6df320b5a6e484089627509 1 parent 52cbe2a
@BorisMoore authored
View
4 README.md
@@ -8,4 +8,6 @@ It can also be used together with [JsViews](https://github.com/BorisMoore/jsview
See [Approaching Beta: What's changing in JsRender and JsViews](http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html) for documentation of changes.<br/>
See also [JsRender Fundamentals](http://johnpapa.net/new-course-on-jsrender-templating-fundamentals-with-javascript) training course from John Papa on [Pluralsight](http://pluralsight.net)</br>
-**Warning:** JsRender is close to beta, but not yet officially beta, so there may still be changes to APIs and features in the coming period.<br/>
+**Warning:** JsRender is not yet officially beta, though the APIs and code are now stable. JsViews, on the other hand, is still evolving (with a number of
+powerful features arriving), and its Beta is currently planned for late September or early October. Since this could lead to small API changes in JsRender
+(to accomodate JsViews integration) JsRender will not be declared officially Beta until around the same time. Thank you for you patience!<br/>
View
4 demos/demos.html
@@ -23,7 +23,9 @@
<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_passing-in-context.html">Passing in contextual variables or helpers</a></li>
+ <li><a href="step-by-step/11_accessing-parent-data.html">Accessing parent data</a></li>
+ <li><a href="step-by-step/12_passing-in-context.html">Passing in context</a></li>
+ <li><a href="step-by-step/13_associating-helpers-with-templates.html">Associating helpers with templates</a></li>
<li><a href="step-by-step/20_without-jquery.html">JsRender without jQuery</a></li>
</ul>
View
126 demos/step-by-step/11_accessing-parent-data.html
@@ -0,0 +1,126 @@
+<!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" />
+ <style>
+ pre { font-size:10pt; font-weight:bold; }
+ </style>
+</head>
+<body>
+<a href="../demos.html">JsRender Demos</a><br />
+
+<h3>Example Scenario: Accessing parent data.</h3>
+
+<!---------------------- First Example ---------------------->
+
+<div class="subhead">Stepping up through the views (tree of nested rendered templates)</div>
+
+<pre>
+var model = {
+ specialMessage: function(...) { ... },
+ theater: "Rialto",
+ movies: [ ... ]
+}
+
+{{for movies}}
+ &lt;tr>
+ &lt;td>'{{>title}}': showing at the '{{>#parent.parent.data.theater}}'&lt;/td>
+</pre>
+
+<table>
+ <thead><tr><th>Title</th><th>Languages (+specialMessage)</th></tr></thead>
+ <tbody id="movieList1"></tbody>
+</table>
+
+<!---------------------- Second Example ---------------------->
+
+<div class="subhead">Setting contextual template parameters, accessible in all nested contexts as <em>~nameOfParameter</em>:</div>
+
+<pre>
+{{for movies ~theater=theater}}
+ &lt;tr>
+ &lt;td>'{{>title}}': showing at the '{{>~theater}}'&lt;/td>
+</pre>
+
+<table>
+ <thead><tr><th>Title</th><th>Languages (+specialMessage)</th></tr></thead>
+ <tbody id="movieList2"></tbody>
+</table>
+
+<!--=================== Demo ===================-->
+
+<!------------------ Templates ------------------>
+
+<script id="movieTemplate1" type="text/x-jsrender">
+ {{for movies}}
+ <tr>
+ <td>'{{>title}}': showing at the '{{>#parent.parent.data.theater}}'</td>
+ <td>
+ {{if languages}}
+ {{for languages}}
+ {{>#data}}{{>#parent.parent.parent.parent.parent.data.specialMessage(#data, #parent.parent.data.title)}}<br/>
+ {{/for}}
+ {{/if}}
+ </td>
+ </tr>
+ {{/for}}
+</script>
+
+<script id="movieTemplate2" type="text/x-jsrender">
+ {{for movies ~theater=theater ~specialMessage=specialMessage}}
+ <tr>
+ <td>'{{>title}}': showing at the '{{>~theater}}'</td>
+ <td>
+ {{for languages ~title=title}}
+ {{>#data}}{{>~specialMessage(#data, ~title)}}<br/>
+ {{/for}}
+ </td>
+ </tr>
+ {{/for}}
+</script>
+
+<!------------------ Script ------------------>
+
+<script type="text/javascript">
+
+ var model = {
+ specialMessage: function(language, title) {
+ if (language === "French" && title === "City Hunter") { return ": (temporarily unavailable)"; }
+ },
+ theater: "Rialto",
+
+ movies: [
+ {
+ title: "Meet Joe Black",
+ languages: [
+ "English",
+ "French"
+ ]
+ },
+ {
+ title: "City Hunter",
+ languages: [
+ "Mandarin",
+ "French",
+ "Chinese"
+ ]
+ }
+ ]
+ };
+
+ $( "#movieList1" ).html(
+ $( "#movieTemplate1" ).render( model )
+ );
+
+ $( "#movieList2" ).html(
+ $( "#movieTemplate2" ).render( model )
+ );
+
+</script>
+
+</body>
+</html>
View
11 ...s/step-by-step/11_passing-in-context.html → ...s/step-by-step/12_passing-in-context.html
@@ -10,9 +10,9 @@
<body>
<a href="../demos.html">JsRender Demos</a><br />
-<h3>Template context: Passing in additional variables</h3>
+<h3>Template context: Passing in additional variables to a render() call</h3>
-<div class="subhead">Passing in contextual variables or helper functions:</div>
+<div class="subhead">Passing in contextual variables or helper functions, using the options parameter of <em>...render( data, options );</em></div>
<pre>
$( selector ).render( data, {
reverseSort: reverse,
@@ -21,7 +21,8 @@
})
</pre>
-<div class="subhead">Use ~name to access a context variable or helper by name:</div>
+<div class="subhead">Use <em>~name</em> to context variables or helpers by name - whether passed in with options,</div>
+<div class="subhead">registered globally as helpers, or registered as helpers for a specific template.</div>
<pre>
&lt;th>&lt;button>{{>~buttonCaption}}&lt;/button>&lt;/th>
@@ -99,11 +100,11 @@
]
}
];
-
+
function myFormatFunction(value) {
return upperCase ? value.toUpperCase() : value.toLowerCase();
}
-
+
$("#movieList")
.on("click", "#sortBtn", function(){
reverse = !reverse;
View
104 demos/step-by-step/13_associating-helpers-with-templates.html
@@ -0,0 +1,104 @@
+<!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="../demos.html">JsRender Demos</a><br />
+
+<h3>Associating specific contextual helpers with templates</h3>
+
+<div class="subhead">Including helpers in a template definition.</div>
+<pre>
+$.templates({
+ appTmpl: {
+ markup:"#appTmpl",
+ helpers: {
+ supplierUtils: ...
+ }
+ }
+});
+</pre>
+
+<div class="subhead">Passing different helpers to a subtemplate based on the context where it is used.</div>
+<pre>
+{{for suppliers tmpl="personTmpl" ~utils=~supplierUtils/}}
+</pre>
+
+<div class="subhead">Accessing helper from nested template:</div>
+<pre>
+&lt;b>ID:&lt;/b> &lt;em>{{:~utils.format(id)}}&lt;/em>
+</pre>
+
+<!--================ Demo ================-->
+
+<div id="target"></div>
+
+<script id="appTmpl" type="text/x-jsrender">
+ <h3>Suppliers</h3>
+ <table><tbody>
+ {{for suppliers tmpl="personTmpl" ~utils=~supplierUtils/}}
+ </tbody></table>
+
+ <h3>Customers</h3>
+ <table><tbody>
+ {{for customers tmpl="personTmpl" ~utils=~customerUtils/}}
+ </tbody></table>
+</script>
+
+<script id="personTmpl" type="text/x-jsrender">
+ <tr>
+ <td><b>ID:</b> <em>{{:~utils.format(id)}}</em></td>
+ <td>{{:firstName}} {{:lastName}}</td>
+ </tr>
+</script>​
+
+<script type='text/javascript'>//<![CDATA[
+ var people = [
+ {
+ id: "abc22",
+ firstName: "Jeff",
+ lastName: "Johnson"
+ },
+ {
+ id: "pq44",
+ firstName: "Rachel",
+ lastName: "Roberts"
+ },
+ {
+ id: "xyz99",
+ firstName: "Jacques",
+ lastName: "Bertin"
+ }
+ ];
+
+ var model = {
+ suppliers: [people[0], people[2]],
+ customers: [people[1], people[2]]
+ }
+
+ $.templates({
+ personTmpl: "#personTmpl",
+ appTmpl: {
+ markup:"#appTmpl",
+ helpers: {
+ supplierUtils: {
+ format:function(val){return "Supplier:" + val.toUpperCase();}
+ },
+ customerUtils: {
+ format:function(val){return "Customer:" + val.toLowerCase();}
+ }
+ }
+ }
+ });
+
+ $("#target").html( $.render.appTmpl( model ));
+</script>
+
+</body>
+</html>
+
Please sign in to comment.
Something went wrong with that request. Please try again.