Permalink
Browse files

Commit counter 23. Several fixes and improvements. Main changes as fo…

…llows:

#index will only work from item 'views', but #getIndex() now available from
nested {{if}} blocks etc. (fixes #173).

Fixes and improvements for associating resources (tags, helpers, converters)
with template. (See #170)

Sample test page for above nested resouces feature: nested-template-resources.html.

New feature for deep paths, which now allow a.b.c when a or b are null to
render an empty string, and not throw. Just set noerror=true. Updated sample
step-by-step/07_paths.html to show this, as well as the new comment tag:
{{!-- this is a comment --}}, and the use of aliases ~foo=expression for
providing access from nested templates without using #parent.parent.parent...


Continued improving compiled template output for ease of debugging. Set
$.views.settings.tryCatch=false; to cause errors thrown in compiled template
rendering to throw in the template, and facilitate debugging from there,
rather then rendering the error string and continuing... Example of this added
in nested-template-resources.html test page.
  • Loading branch information...
BorisMoore committed Dec 10, 2012
1 parent 69ce6ce commit f38477bb973dfe70772abe4c2e1461d50d2f2ee1
View
@@ -14,10 +14,10 @@ <h2>JsRender: Demos</h2>
<li class="subhead">Step-by-step samples:</li>
<li class="inset">- <a href="step-by-step/01_inserting-data.html">Inserting data values</a></li>
<li class="inset">- <a href="step-by-step/02_compiling-named-templates-from-strings.html">Compiling named templates from strings</a></li>
- <li class="inset">- <a href="step-by-step/03_converters-and-encoding.html">{{: }} and {{> }}</a></li>
- <li class="inset">- <a href="step-by-step/04_if-else-tag.html">{{if}} and {{else}}</a></li>
- <li class="inset">- <a href="step-by-step/05_for-tag.html">{{for}}</a></li>
- <li class="inset">- <a href="step-by-step/06_template-composition.html">Template composition</a></li>
+ <li class="inset">- <a href="step-by-step/03_converters-and-encoding.html">Rendering data values (with optional encoding) using {{: }} and {{> }}: </a></li>
+ <li class="inset">- <a href="step-by-step/04_if-else-tag.html">Conditional blocks using {{if}} and {{else}}</a></li>
+ <li class="inset">- <a href="step-by-step/05_for-tag.html">Looping through data using {{for}}</a></li>
+ <li class="inset">- <a href="step-by-step/06_template-composition.html">Template composition using {{for}}</a></li>
<li class="inset">- <a href="step-by-step/07_paths.html">Accessing paths</a></li>
<li class="inset">- <a href="step-by-step/08_custom-tags.html">Custom tags</a></li>
<li class="inset">- <a href="step-by-step/09_helper-functions.html">'Helper' functions</a></li>
View
@@ -17,14 +17,6 @@ <h2>JsRender: Next-generation jQuery Templates</h2>
<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-jsrender-with-jquery.html">JsRender unit tests - with jQuery</a></b></div>
- <div class="subhead"><b><a href="../test/unit-tests-jsrender-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">
@@ -43,5 +35,14 @@ <h2>JsRender: Next-generation jQuery Templates</h2>
<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>
+<div class="subhead"><em>Tests</em>:</div>
+
+<div class="box">
+ <div class="subhead"><a href="../test/unit-tests-jsrender-with-jquery.html">JsRender unit tests - with jQuery</a></div>
+ <div class="subhead"><a href="../test/unit-tests-jsrender-no-jquery.html">JsRender unit tests - without jQuery</a></div>
+ <div><a href="../test/perf-compare.html">Perf comparison</a></div>
+ <div class="subhead"><a href="../test/test-pages/index.html">Additional test pages</a></div>
+</div>
+
</body>
</html>
@@ -2,7 +2,7 @@
<html>
<head>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
- <script src="../../jsrender21.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" />
@@ -15,21 +15,23 @@
<body>
<a href="../demos.html">JsRender Demos</a><br />
-<h3>Using {{: }} or {{> }} to render data values with optional conversion or HTML encoding</h3>
+<h3>Using {{: }} or {{> }} to render data values with optional conversion or encoding</h3>
<ul>
-<li>{{:value}} does not convert. Used to render values that include html markup</li>
-<li>{{loc:value lang="..."}} Uses custom converter.</li>
-<li>{{html:value}} Converts using built-in HTML encoder. (Better security, but slight perf cost)</li>
-<li>{{>value}} Alternative syntax for built-in HTML encoder.</li>
+<li><em>{{:value}}</em> &mdash; does not convert. Used to render values that include html markup.</li>
+<li><em>{{loc:value lang="..."}}</em> &mdash; Uses custom converter.</li>
+<li><em>{{html:value}}</em> &mdash; Converts using built-in HTML encoder. (Better security within element content, but slight perf cost).</li>
+<li><em>{{>value}}</em> &mdash; Alternative syntax for built-in HTML encoder.</li>
+<li><em>{{attr:availability}}</em> &mdash; Converts using built-in attribute encoder. (Better security within attributes).</li>
+<li><em>{{url:value lang="..."}}</em> &mdash; Converts using built-in URL encoder.</li>
</ul><br />
<div class="box label">
<b>Note:</b> A common use for converters is to protect against injection attacks from untrusted data.
<br />It is generally best to use <b>{{> }}</b> when rendering data within element content, if the data is not intended to provide markup for insertion in the DOM.
-<br />In the context of HTML attributes, other encoders can easily be registered, such as an attribute encoder, <b>{{attr: }}</b>.</div>
+<br />In the context of HTML attributes, use <b>{{attr: }}</b>.</div>
<script id="movieTemplate" type="text/x-jsrender">
- <tr>
+ <tr title="{{attr:availability}}">
<td>{{loc:title lang='EN'}}</td>
<td>{{loc:title lang='FR'}}</td>
<td class="synopsis">{{:synopsis}}</td>
@@ -46,10 +48,12 @@ <h3>Using {{: }} or {{> }} to render data values with optional conversion or HTM
var movies = [
{
+ availability: "Available in 'X&Y' Cinemas",
title: "Meet Joe Black",
synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..."
},
{
+ availability: "Available at < 20kms from London",
title: "Eyes Wide Shut",
synopsis: "Director <span class='director'>Stanley Kubrick's</span> final film: <br/><br/><img src='http://cdn-4.nflximg.com/US/boxshots/large/5670434.jpg'/>"
}
@@ -12,29 +12,41 @@ <h3>Accessing paths</h3>
<script id="peopleTemplate" type="text/x-jsrender">
-<b>{{:#index+1}}:</b> {{>firstName}} {{>lastName}}:
+ <b>{{:#index+1}}:</b> {{>firstName}} {{>lastName}}:
-<br/>
-{{for address tmpl="#addressTemplate"/}}
+ <br/>
+ {{for address tmpl="#addressTemplate"/}}
-{{if phones cells}}
- <div>
- Phones:
- {{for phones cells}} <b>{{>#data}}</b> ({{>#parent.parent.data.firstName}}'s){{/for}}
- </div>
-{{/if}}
-<br/>
+ {{if phones cells}}
+ <div>
+ Phones:
+ {{for phones cells}} <b>{{>#data}}</b> ({{>#parent.parent.data.firstName}}'s{{/for}}
+ </div>
+ {{/if}}
-<i>
- {{>firstName}}
+{{!-- or provide an alias to get to firstName from nested content
- {{if address.street}}
- lives in {{>address.street}}.
- {{else}}
- has no street address...
+ {{if phones cells ~frstNm=firstName}}
+ <div>
+ Phones:
+ {{for phones cells}} <b>{{>#data}}</b> ({{>~frstNm}})'s{{/for}}
+ </div>
{{/if}}
-</i>
-<hr/>
+
+--}}
+
+ <br/>
+
+ <i>
+ {{>firstName}}
+
+ {{if address.street noerror=true}} {{!-- We added noerror=true, since address may be null or undefined --}}
+ lives in {{>address.street}}.
+ {{else}}
+ has no address...
+ {{/if}}
+ </i>
+ <hr/>
</script>
@@ -65,9 +77,6 @@ <h3>Accessing paths</h3>
{
firstName: "Xavier",
lastName: "NoStreet",
- address: {
- city: "Redmond"
- },
phones: "222 666 3455",
cells: ["444 666 3455", "999 222 1111"]
},
Oops, something went wrong.

0 comments on commit f38477b

Please sign in to comment.