JavaScript Stacktrace

Just add the following line in your JavaScript code to display a stacktrace in the JavaScript console.


console.log(new Error().stack)


Quick JsRender Tutorial

This is a quick walkthrough of JsRender. JsRender is the next-generation jQuery Templates, optimized for fast, string-based rendering. We will be using jQuery in our examples below, but JsRender is not dependent on jQuery.

We start with the HTML below. Please download JsRender and make it available on your local environment. In our example, jsrender.js is in the root folder.

	<!DOCTYPE html>
	<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
		<script src="jsrender.js" type="text/javascript"></script>
		<script type="text/javascript">
			var movies = [
				{ name: "Up", releaseYear: "2009", languages: [{ name: "English" }, { name: "Spanish" }] },
				{ name: "Finding Nemo", releaseYear: "2003", languages: [] },
				{ name: "Toy Story", releaseYear: "1995", languages: [{ name: "English" }, { name: "German" }] }
			];
		</script>
	</head>
	<body>
		<ul id="movieList" />
	</body>
	</html>

Everything is standard HTML, JavaScript and JSON so far. Now let’s start using JsRender. After the movieList, let’s insert the the template.

<script id="movieTemplate" type="text/x-jsrender">
		<li>
			{{>name}} {{>releaseYear}}
		</li>
</script>

Notice we insert data by using the syntax {{>variable}}.

After that, insert the call to JsRender template render.

<script type="text/javascript">
		$("#movieList").html(
			$("#movieTemplate").render(movies)
		);
</script>

What our code does is it calls JsRender to go through the array of movies and create the HTML for each movie using the template provided. Running the HTML in the browser outputs.

  • Up 2009
  • Finding Nemo 2003
  • Toy Story 1995

The complete code looks like

	<!DOCTYPE html>
	<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
		<script src="jsrender.js" type="text/javascript"></script>
		<script type="text/javascript">
			var movies = [
				{ name: "Up", releaseYear: "2009", languages: [{ name: "English" }, { name: "Spanish" }] },
				{ name: "Finding Nemo", releaseYear: "2003", languages: [] },
				{ name: "Toy Story", releaseYear: "1995", languages: [{ name: "English" }, { name: "German" }] }
			];
		</script>
	</head>
	<body>
		<ul id="movieList" />

		<script id="movieTemplate" type="text/x-jsrender">
			<li>
				{{>name}} {{>releaseYear}}
			</li>
		</script>

		<script type="text/javascript">
			$("#movieList").html(
				$("#movieTemplate").render(movies)
			);
		</script>
	</body>
	</html>

Now let’s go over some basic JsRender syntax.

1. If you want to print values without HTML encoding, use {{:value}}.

	{{:name}} {{>releaseYear}}

2. If you want a default value, use ||.

	{{>name}} {{>releaseYear || 'N/A'}}

3. If you want to display the current index during a loop, use #index.

	{{:#index+1}} {{>name}} {{>releaseYear}}

4. If you want conditions, use {{if}} and {{else}}.

	{{if releaseYear == '1995'}}
		{{>name}} {{>releaseYear}} (Classic)
	{{else releaseYear == '2009'}}
		{{>name}} {{>releaseYear}} (New)
	{{else}}
		{{>name}} {{>releaseYear}}
	{{/if}}

5. If you want loops, use {{for}}

	{{>name}} {{>releaseYear}}
	{{for languages}}
		{{>name}}
	{{/for}}

6. If you want to access the parent, use {{>#parent.parent.data}}

	{{>name}} {{>releaseYear}}
	{{for languages}}
		{{>#parent.parent.data.name}} {{>name}}
	{{/for}}

7. You can also access use context variables to access the parent.

	{{>name}} {{>releaseYear}}
	{{for languages ~movieName=name}}
		{{>~movieName}} {{>name}}
	{{/for}}

8. If you want to use templates inside a template, use the tmpl attribute.

	<script id="languageTemplate" type="text/x-jsrender">
		{{>name}}
	</script>

	....

	{{>name}} {{>releaseYear}}
	{{for languages tmpl="#languageTemplate" /}}

9. You can create helper functions.

	<script type="text/javascript">
		$.views.helpers({
			toUpper: function(val) {
				return val.toUpperCase();
			}
		});
	</script>

	...

	{{>~toUpper(name)}} {{>releaseYear}}

10. You can create custom tags.

	<script type="text/javascript">
		$.views.tags({
			toUpper: function(val) {
				return val.toUpperCase();
			}
		});
	</script>

	...

	{{toUpper name /}} {{>releaseYear}}

11. If you want to access the data passed to the render function, use #data.

	{{for #data}}
		<li>
			{{>name}} {{>releaseYear}}
		</li>
	{{/for}}

12. You can also pass parameters and functions to the render function.

	{{>~label}} {{>name}} {{>releaseYear}}

	...

	$("#movieTemplate").render(movies, { label: "Movie: " })

13. If you wish to loop through an array inside the template instead of JsRender, wrap your data in an array.

	$("#movieTemplate").render([movies]);

That wraps up our quick overview of JsRender. For advanced features and more examples, please look at the official JsRender demos.


Console Object on IE

Here’s the JavaScript you need to avoid console errors in browsers that lack a console. This is taken from HTML5 Boilerplate 4, in plugins.js.

	if (!(window.console && console.log)) {
		(function() {
			var noop = function() {};
			var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
			var length = methods.length;
			var console = window.console = {};
			while (length--) {
				console[methods[length]] = noop;
			}
		}());
	}

If you use jQuery, you can use a more terse version.

	if (!(window.console && console.log)) {
		window.console = {};
		$.each(['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'], function() {
			window.console[this] = $.noop;
		});
	}

If you are only worried about console.log, then you can use

	if (!(window.console && console.log)) {
		window.console = {
			log: function(param) {}
		};
	}