Introduce end-of-line normalization

BorisMoore · Aug 17, 2015 · 7c0b660 · 7c0b660
1 parent 913fadd
commit 7c0b660
Show file tree

Hide file tree

Showing 15 changed files with 4,593 additions and 6,087 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,5 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# JS files must always use LF for tools to work
+*.js eol=lf
diff --git a/demos/index.html b/demos/index.html
@@ -53,6 +53,7 @@ <h3>Demos</h3>
 <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 class="subhead"><a href="../test/index.html">Additional tests</a></div>
 	<div><a href="../test/perf-compare.html">Perf comparison</a></div>
 </div>
 

diff --git a/demos/scenarios/02_separators-scenario.html b/demos/scenarios/02_separators-scenario.html
@@ -15,7 +15,7 @@ <h3>Example Scenario: Inserting "and" and "," separators between words</h3>
 
 <!---------------------- First Example ---------------------->
 
-<div class="subhead">Example 1: Expressions in tags, and template parameters:</div>
+<div class="subhead">Example 1: Expressions in tags, and template parameters ({{if}} tag):</div>
 
 <pre>
     {{for languages ~count=languages.length}}
@@ -43,6 +43,35 @@ <h3>Example Scenario: Inserting "and" and "," separators between words</h3>
 
 <!---------------------- Second Example ---------------------->
 
+<div class="subhead">Example 2: Expressions in tags, and template parameters (ternary expression):</div>
+
+<pre>
+    {{for languages ~count=languages.length}}
+        ...
+        {{: #index === ~count-2 ? " and " : #index < ~count-2 ? ", " : ""}}
+        ...
+    {{/for}}
+</pre>
+
+<script id="movieTemplate2" type="text/x-jsrender">
+	<tr>
+		<td>{{>title}}</td>
+		<td>
+    {{for languages ~count=languages.length}}
+				{{>name}}{{: #index === ~count-2 ? " and " : #index < ~count-2 ? ", " : ""}}
+			{{/for}}
+		</td>
+	</tr>
+</script>
+
+<table>
+	<thead><tr><th>Title</th><th>Languages</th></tr></thead>
+	<tbody id="movieList2"></tbody>
+</table>
+<br />
+
+<!---------------------- Second Example ---------------------->
+
 <div class="subhead">Example 2: Custom helper functions:</div>
 
 <pre>
@@ -53,7 +82,7 @@ <h3>Example Scenario: Inserting "and" and "," separators between words</h3>
     {{/for}}
 </pre>
 
-<script id="movieTemplate2" type="text/x-jsrender">
+<script id="movieTemplate3" type="text/x-jsrender">
 	<tr>
 		<td>{{>title}}</td>
 		<td>
@@ -64,10 +93,9 @@ <h3>Example Scenario: Inserting "and" and "," separators between words</h3>
 	</tr>
 </script>
 
-
 <table>
 	<thead><tr><th>Title</th><th>Languages</th></tr></thead>
-	<tbody id="movieList2"></tbody>
+	<tbody id="movieList3"></tbody>
 </table>
 <br />
 
@@ -81,7 +109,7 @@ <h3>Using "allowCode"</h3>
 <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.</div>
 
-<div class="subhead">Example 3: allowCode, for program flow:</div>
+<div class="subhead">Example 3: allowCode, for program flow - with if(...) { ... }:</div>
 
 <pre>
 $.templates( "movieTmpl", {
@@ -98,18 +126,18 @@ <h3>Using "allowCode"</h3>
 }}
 </pre>
 
-<script id="movieTemplate3" type="text/x-jsrender">
+<script id="movieTemplate4" type="text/x-jsrender">
 	<tr>
 		<td>{{>title}}</td>
 		<td>
 			{{for languages}}
 				{{>name}}{{*
 
-					if ( view.index === view.parent.data.length - 2 ) {
+					if ( view.index === view.parent.data.length-2 ) {
 
 				}} and {{*
 
-					} else if ( view.index < view.parent.data.length - 2 ) {
+					} else if ( view.index < view.parent.data.length-2 ) {
 
 				}}, {{* } }}
 			{{/for}}
@@ -119,49 +147,37 @@ <h3>Using "allowCode"</h3>
 
 <table>
 	<thead><tr><th>Title</th><th>Languages</th></tr></thead>
-	<tbody id="movieList3"></tbody>
+	<tbody id="movieList4"></tbody>
 </table>
 
 <!---------------------- Fourth Example ---------------------->
 
-<div class="subhead">Example 4: allowCode, for returning content:</div>
+<div class="subhead">Example 5: allowCode, for returning content - with ternary expression:</div>
 
 <pre>
 $.templates( "movieTmpl", {
     markup: "#movieTemplate",
     allowCode: true
 });
 
-{{*
-    if ( myexpression ) {
-        ret += ...;
-        ...
-    }
-}}
+{{*: myexpression ? ... : ...}}
 </pre>
 
-<script id="movieTemplate4" type="text/x-jsrender">
+<script id="movieTemplate5" type="text/x-jsrender">
 	<tr>
 		<td>{{>title}}</td>
 		<td>
 			{{for languages}}
-				{{>name}}{{*
-
-					if ( view.index === view.parent.data.length - 2 ) {
-						ret += " and";
-					} else if ( view.index < view.parent.data.length - 2 ) {
-						ret+= ",";
-					}
-
-				}}
+				{{>name}}
+				{{*: view.index === view.parent.data.length-2 ? " and " : view.index < view.parent.data.length-2 ? ", " : ""}}
 			{{/for}}
 		</td>
 	</tr>
 </script>
 
 <table>
 	<thead><tr><th>Title</th><th>Languages</th></tr></thead>
-	<tbody id="movieList4"></tbody>
+	<tbody id="movieList5"></tbody>
 </table>
 
 
@@ -170,11 +186,11 @@ <h3>Using "allowCode"</h3>
 	$.views.helpers({
 
 		nextToLast: function() {
-			return this.index === this.parent.data.length - 2;
+			return this.index === this.parent.data.length-2;
 		},
 
 		notLast: function() {
-			return this.index !== this.parent.data.length - 1;
+			return this.index !== this.parent.data.length-1;
 		}
 	});
 
@@ -207,16 +223,23 @@ <h3>Using "allowCode"</h3>
 	$.templates({
 		movieTmpl1: "#movieTemplate1",
 		movieTmpl2: "#movieTemplate2",
-		movieTmpl3: {
+		movieTmpl3: "#movieTemplate3",
+		movieTmpl4: {
 			markup: "#movieTemplate3",
-			allowCode: true
+			allowCode: true,
+			useViews: true // Since the {{* ... }} code inserted uses views (view.parent...) we make sure the default optimization of not using views when not necessary
 		},
-		movieTmpl4: {
+		movieTmpl5: {
 			markup: "#movieTemplate4",
-			allowCode: true
+			allowCode: true,
+			useViews: true
 		}
 	});
 
+	// Note that by default, rendering simple templates does not create a view hierarchy - which allows for optimized performance.
+	// For the movieList3 and movieList4 we are inserting code that does depend on the view hierarchy (e.g. view.parent... ) so for
+	// those templates we have set useViews: true. We could alternatively use $.views.settings.useViews = true, as a global setting...
+
 	$( "#movieList1" ).html(
 		$.render.movieTmpl1( movies )
 	);
@@ -233,6 +256,10 @@ <h3>Using "allowCode"</h3>
 		$.render.movieTmpl4( movies )
 	);
 
+	$( "#movieList5" ).html(
+		$.render.movieTmpl4( movies )
+	);
+
 </script>
 
 </body>